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

更新

Browse Source
This commit is contained in:
xiaozhiyong
2026-06-12 10:41:19 +08:00
parent aa8368e4fb
commit 4cec2661c1
12 changed files with 3130 additions and 2483 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/style/element/index.scss
View File

@@ -3,22 +3,22 @@
'white': #ffffff,
'black': #000000,
'primary': (
'base': #4d70ff
'base': #22d3ee
),
'success': (
'base': #67c23a
'base': #10b981
),
'warning': (
'base': #e6a23c
'base': #facc15
),
'danger': (
'base': #f56c6c
'base': #ef4444
),
'error': (
'base': #f56c6c
'base': #ef4444
),
'info': (
'base': #909399
'base': #64748b
)
)
);

1010
src/style/main.scss
View File

File diff suppressed because it is too large Load Diff

2
src/view/dashboard/components/card.vue
View File

@@ -5,7 +5,7 @@
<template>
<div
class="bg-white dark:bg-slate-900 text-gray-800 dark:text-gray-400 rounded shadow"
class="gva-industrial-card bg-white dark:bg-slate-900 text-gray-800 dark:text-gray-400 rounded shadow"
:class="[customClass || '', withoutPadding ? 'p-0' : 'p-4']"
>
<div v-if="title" class="flex justify-between items-center">

240
src/view/largeScreen/charts.js Normal file
View File

@@ -0,0 +1,240 @@
import * as echarts from 'echarts'
const darkTooltip = {
trigger: 'axis',
backgroundColor: 'rgba(6, 20, 48, 0.92)',
borderColor: 'rgba(0, 150, 255, 0.4)',
textStyle: { color: '#e2e8f0' }
}
const axisStyle = {
axisLine: { lineStyle: { color: 'rgba(0, 150, 255, 0.25)' } },
axisLabel: { color: '#64748b', fontSize: 10 },
splitLine: { lineStyle: { color: 'rgba(0, 150, 255, 0.12)', type: 'dashed' } }
}
export const getEnergyTrendOption = () => ({
tooltip: darkTooltip,
legend: {
data: ['本月', '上月'],
right: 10,
top: 0,
textStyle: { color: '#94a3b8', fontSize: 10 },
itemWidth: 10,
itemHeight: 10
},
grid: { top: '18%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
data: ['01', '05', '10', '15', '20', '25', '30'],
...axisStyle
},
yAxis: {
type: 'value',
name: '量(kWh)',
nameTextStyle: { color: '#64748b', fontSize: 10 },
...axisStyle
},
series: [
{
name: '本月',
data: [0, 35, 10, 20, 5, 15, 25],
type: 'line',
smooth: true,
lineStyle: { color: '#00d4ff', width: 2, shadowColor: 'rgba(0, 212, 255, 0.45)', shadowBlur: 8 },
itemStyle: { color: '#00d4ff' },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(0, 212, 255, 0.35)' },
{ offset: 1, color: 'rgba(0, 212, 255, 0)' }
])
},
markPoint: {
data: [{ type: 'max', name: 'Max' }, { type: 'min', name: 'Min' }],
symbol: 'rect',
symbolSize: [36, 28],
symbolOffset: [0, -20]
}
}
]
})
export const getDeviceCategoryOption = (categories, total = 30) => ({
series: [
{
type: 'pie',
radius: ['48%', '72%'],
center: ['38%', '50%'],
avoidLabelOverlap: false,
itemStyle: { borderRadius: 6, borderColor: '#010812', borderWidth: 2 },
label: {
show: true,
position: 'center',
formatter: `{total|${total}}\n{name|总数}`,
rich: {
total: { fontSize: 22, fontWeight: 'bold', color: '#e2e8f0', lineHeight: 28 },
name: { fontSize: 12, color: '#94a3b8' }
}
},
labelLine: { show: false },
data: categories.map((item) => ({
value: item.value,
name: item.name,
itemStyle: { color: item.color }
}))
}
]
})
export const getPowerCurveOption = () => ({
tooltip: darkTooltip,
legend: {
data: ['功率'],
right: 10,
top: 0,
textStyle: { color: '#94a3b8', fontSize: 10 },
itemWidth: 10,
itemHeight: 10
},
grid: { top: '18%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
data: ['13:45', '18:00', '22:15', '02:30', '06:45', '11:00', '13:45'],
...axisStyle
},
yAxis: {
type: 'value',
name: '功率(kW)',
nameTextStyle: { color: '#64748b', fontSize: 10 },
...axisStyle
},
series: [
{
name: '功率',
data: [0, 1.944, 0, 0, 0, 1.8, 0],
type: 'line',
smooth: true,
lineStyle: { color: '#00d4ff', width: 2, shadowColor: 'rgba(0, 212, 255, 0.45)', shadowBlur: 8 },
itemStyle: { color: '#00d4ff' },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(0, 212, 255, 0.35)' },
{ offset: 1, color: 'rgba(0, 212, 255, 0)' }
])
},
markPoint: { data: [{ type: 'max', name: 'Max' }, { type: 'min', name: 'Min' }] }
}
]
})
export const getAlarmPendingOption = () => ({
tooltip: darkTooltip,
grid: { top: '15%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
data: ['02-17', '02-22', '02-27', '03-04', '03-09', '03-14'],
...axisStyle
},
yAxis: {
type: 'value',
name: '次数',
nameTextStyle: { color: '#64748b', fontSize: 10 },
...axisStyle
},
series: [
{
name: '待处理报警',
data: [4805, 4850, 4900, 4958, 5000, 5304],
type: 'line',
smooth: true,
lineStyle: { color: '#00d4ff', width: 2, shadowColor: 'rgba(0, 212, 255, 0.45)', shadowBlur: 8 },
itemStyle: { color: '#00d4ff' },
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(0, 212, 255, 0.35)' },
{ offset: 1, color: 'rgba(0, 212, 255, 0)' }
])
},
markPoint: { data: [{ type: 'max', name: 'Max' }, { type: 'min', name: 'Min' }] }
}
]
})
export const getAlertDistributionOption = (alertTypes) => ({
series: [
{
type: 'pie',
radius: ['42%', '68%'],
center: ['40%', '50%'],
avoidLabelOverlap: false,
itemStyle: { borderRadius: 6, borderColor: '#010812', borderWidth: 2 },
label: {
show: true,
position: 'center',
formatter: '{d|95.54%}',
rich: {
d: { fontSize: 18, fontWeight: 'bold', color: '#e2e8f0' }
}
},
labelLine: { show: false },
data: alertTypes.map((item) => ({
value: item.count,
name: item.name,
itemStyle: { color: item.color }
}))
}
]
})
export const getAlertTrendOption = () => ({
tooltip: darkTooltip,
legend: {
data: ['二级报警', '报警', '预警'],
right: 10,
top: 0,
textStyle: { color: '#94a3b8', fontSize: 10 },
itemWidth: 10,
itemHeight: 10
},
grid: { top: '20%', left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: {
type: 'category',
data: ['01', '05', '10', '15', '20', '25', '30'],
...axisStyle
},
yAxis: {
type: 'value',
name: '数量',
nameTextStyle: { color: '#64748b', fontSize: 10 },
...axisStyle
},
series: [
{
name: '二级报警',
data: [0, 100, 50, 0, 0, 0, 0],
type: 'line',
smooth: true,
lineStyle: { color: '#a855f7', width: 2 },
itemStyle: { color: '#a855f7' },
markPoint: { data: [{ type: 'max' }, { type: 'min' }] }
},
{
name: '报警',
data: [0, 80, 30, 119, 0, 0, 0],
type: 'line',
smooth: true,
lineStyle: { color: '#ef4444', width: 2 },
itemStyle: { color: '#ef4444' },
markPoint: { data: [{ type: 'max' }, { type: 'min' }] }
},
{
name: '预警',
data: [0, 20, 18, 0, 0, 0, 0],
type: 'line',
smooth: true,
lineStyle: { color: '#f59e0b', width: 2 },
itemStyle: { color: '#f59e0b' },
markPoint: { data: [{ type: 'max' }, { type: 'min' }] }
}
]
})

4066
src/view/largeScreen/index.vue
View File

File diff suppressed because it is too large Load Diff

267
src/view/largeScreen2/index.vue
View File

@@ -39,8 +39,8 @@
:header-cell-style="{ background: 'transparent', color: '#fff', border: 'none' }"
:cell-style="{ color: '#fff', border: 'none' }"
>
<el-table-column prop="cbTypeName" label="设备名称" align="center" width="100" />
<el-table-column prop="type" label="设备状态" align="center" width="70">
<el-table-column prop="cbTypeName" label="设备名称" align="center" min-width="42%" />
<el-table-column prop="type" label="设备状态" align="center" min-width="22%">
<template #default="{ row }">
<span :style="{ color: row.type === 'device_online' ? 'green' : 'red' }">{{
row.type === 'device_online' ? '上线' : '下线'
@@ -131,7 +131,7 @@
<div class="scroll-container">
<div class="scroll-text">
<span>{{ row.gatewayAddress }}</span
><span style="margin-left: 0.1rem">{{ row.gatewayAddress }}</span>
><span class="scroll-gap">{{ row.gatewayAddress }}</span>
</div>
</div>
</template>
@@ -260,21 +260,6 @@
const projectBarOption = computed(() => getProjectBarOption(projectData.value))
const alertTrendOption = computed(() => getAlertTrendOption())
const setRem = () => {
const designWidth = 1920
const designHeight = 1080
const baseFontSize = 100
const clientWidth = document.documentElement.clientWidth || document.body.clientWidth
const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
const scaleWidth = clientWidth / designWidth
const scaleHeight = clientHeight / designHeight
const scale = Math.min(scaleWidth, scaleHeight)
const fontSize = scale * baseFontSize
document.documentElement.style.fontSize = fontSize + 'px'
}
const calculateTableHeight = () => {
nextTick(() => {
console.log('bottomRef.value', bottomRef.value.offsetHeight)
@@ -285,9 +270,6 @@
}
onMounted(() => {
setRem()
window.addEventListener('resize', setRem)
// if (bottomRef.value) {
// resizeObserver = new ResizeObserver((entries) => {
// for (const entry of entries) {
@@ -473,43 +455,52 @@
}
onBeforeUnmount(() => {
window.removeEventListener('resize', setRem)
if (resizeObserver) {
resizeObserver.disconnect()
}
document.documentElement.style.fontSize = ''
})
</script>
<style lang="scss">
$design-w: 1920;
$design-h: 1080;
@function px2vw($px) {
@return calc(#{$px} / #{$design-w} * 100vw);
}
@function px2vh($px) {
@return calc(#{$px} / #{$design-h} * 100vh);
}
.background-box {
max-width: 100vw;
height: 100vh;
background: url('@/assets/img/largeScreen2/background.png') #000 no-repeat center center / 100% 100%;
}
.container {
position: relative;
display: flex;
max-width: 100vw;
height: 100vh;
// background: url('@/assets/img/largeScreen2/center-4.png') no-repeat center 1.5rem / 11.6rem 5.6rem;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: flex;
max-width: 100vw;
width: 100vw;
height: 100vh;
.left {
display: flex;
flex-direction: column;
padding: 0.9rem 0;
width: 5.63rem;
flex: 0 0 px2vw(430);
width: px2vw(430);
padding: px2vh(40) 0;
height: 100%;
background: url('@/assets/img/largeScreen2/background-left.png') no-repeat;
background-size: 100% 100%;
gap: 0.12rem;
gap: px2vh(12);
.module-card {
border-radius: 8px;
padding: 0.2rem 0.2rem 0.2rem 0.4rem;
padding: px2vh(20) px2vw(20) px2vh(20) px2vw(30);
display: flex;
flex-direction: column;
flex: 1;
@@ -519,21 +510,21 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.08rem;
// margin-bottom: px2vh(8);
}
.module-title {
display: flex;
align-items: center;
gap: 0.1rem;
font-size: 0.2rem;
gap: px2vw(10);
font-size: px2vw(20);
font-weight: bold;
color: #e2e8f0;
}
.title-icon {
width: 0.06rem;
height: 0.24rem;
width: px2vw(6);
height: px2vh(24);
background: linear-gradient(180deg, #00d4ff 0%, #3b82f6 100%);
border-radius: 2px;
}
@@ -544,13 +535,12 @@
.device-stat-content {
display: flex;
// gap: 0.2rem;
flex: 1;
}
.device-ring-chart {
flex: 1;
min-height: 1.5rem;
min-height: px2vh(150);
height: 100%;
width: 100%;
}
@@ -559,21 +549,20 @@
flex: 0.8;
display: flex;
flex-direction: column;
// gap: 0.12rem;
}
.device-item {
display: flex;
align-items: center;
gap: 0.12rem;
font-size: 0.18rem;
gap: px2vw(12);
font-size: px2vw(18);
font-weight: bold;
white-space: nowrap;
}
.device-dot {
width: 0.1rem;
height: 0.1rem;
width: px2vw(10);
height: px2vw(10);
border-radius: 2px;
}
@@ -589,8 +578,8 @@
.device-count {
color: #e2e8f0;
font-weight: bold;
font-size: 0.14rem;
margin-right: 0.06rem;
font-size: px2vw(14);
margin-right: px2vw(6);
white-space: nowrap;
}
@@ -609,14 +598,7 @@
overflow: hidden;
.el-table {
// --el-table-bg-color: transparent !important;
// --el-table-stripe-bg-color: rgba(100, 100, 100, 0.1) !important;
// --el-table-header-bg-color: transparent !important;
// --el-table-row-hover-bg-color: rgba(100, 100, 100, 0.15) !important;
--el-table-border-color: transparent !important;
// --el-table-header-text-color: #fff !important;
// --el-table-text-color: #fff !important;
// --el-table-tr-bg-color: transparent !important;
background-color: transparent !important;
background: transparent !important;
@@ -636,15 +618,15 @@
}
.cell {
font-size: 0.14rem !important;
font-size: px2vw(14) !important;
color: #e2e8f0 !important;
}
}
}
.status-dot {
width: 0.16rem;
height: 0.16rem;
width: px2vw(16);
height: px2vw(16);
border-radius: 50%;
display: inline-block;
@@ -667,93 +649,94 @@
.project-bar-chart {
flex: 1;
min-height: 1.5rem;
min-height: px2vh(150);
height: 100%;
width: 100%;
}
}
.center {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
padding-bottom: 0.3rem;
// padding-top: 1rem;
padding-bottom: px2vh(10);
.title {
height: 1rem;
line-height: 1rem;
height: px2vh(70);
line-height: px2vh(70);
text-align: center;
color: #fff;
font-size: 0.4rem;
font-size: px2vw(30);
font-weight: bold;
}
.top {
flex: 1;
padding-top: 0.69rem;
padding-top: px2vh(69);
text-align: center;
position: relative;
.image {
margin: 0 auto;
&.first {
width: 5.85rem;
height: 1.55rem;
width: px2vw(585);
height: px2vh(155);
}
&.second {
position: relative;
top: -0.2rem;
width: 5.64rem;
height: 1.14rem;
top: px2vh(-20);
width: px2vw(564);
height: px2vh(114);
}
&.third {
position: relative;
top: -0.5rem;
width: 2.5rem;
height: 2.5rem;
top: px2vh(-50);
width: px2vw(250);
height: px2vh(250);
}
&.fifth {
position: relative;
top: -0.8rem;
width: 5.98rem;
height: 1.21rem;
top: px2vh(-80);
width: px2vw(598);
height: px2vh(121);
}
}
> div {
position: absolute;
> p {
font-size: 0.16rem;
font-size: px2vw(16);
font-weight: bold;
color: #fff;
}
> img {
width: 1.32rem;
height: 0.85rem;
width: px2vw(132);
height: px2vh(85);
}
&.first {
top: 5.22rem;
top: px2vh(522);
left: 50%;
transform: translateX(-3.9rem);
transform: translateX(px2vw(-390));
}
&.second {
top: 5.54rem;
top: px2vh(554);
left: 50%;
transform: translateX(-1.9rem);
transform: translateX(px2vw(-190));
}
&.third {
top: 5.54rem;
top: px2vh(554);
left: 50%;
transform: translateX(0.73rem);
transform: translateX(px2vw(73));
}
&.fourth {
top: 5.22rem;
top: px2vh(522);
left: 50%;
transform: translateX(2.65rem);
transform: translateX(px2vw(265));
}
}
}
.bottom {
height: 3.57rem;
flex: 0 0 px2vh(280);
height: px2vh(280);
background: url('@/assets/img/largeScreen2/center-10.png') no-repeat;
background-size: 100% 100%;
padding: 0.5rem 0.3rem 0.3rem;
padding: px2vh(36) px2vw(30) px2vh(24);
box-sizing: border-box;
.scroll-container {
@@ -768,6 +751,10 @@
animation: scroll 10s linear infinite;
}
.scroll-gap {
margin-left: px2vw(10);
}
@keyframes scroll {
0% {
transform: translateX(0);
@@ -778,14 +765,7 @@
}
.el-table {
// --el-table-bg-color: transparent !important;
// --el-table-stripe-bg-color: rgba(100, 100, 100, 0.1) !important;
// --el-table-header-bg-color: transparent !important;
// --el-table-row-hover-bg-color: rgba(100, 100, 100, 0.15) !important;
--el-table-border-color: transparent !important;
// --el-table-header-text-color: #fff !important;
// --el-table-text-color: #fff !important;
// --el-table-tr-bg-color: transparent !important;
background-color: transparent !important;
background: transparent !important;
@@ -805,27 +785,26 @@
}
.cell {
font-size: 0.14rem !important;
font-size: px2vw(14) !important;
color: #e2e8f0 !important;
}
}
}
}
.right {
width: 5.63rem;
flex: 0 0 px2vw(430);
width: px2vw(430);
height: 100%;
background: url('@/assets/img/largeScreen2/background-right.png') no-repeat;
background-size: 100% 100%;
padding: 0.9rem 0;
padding: px2vh(90) 0;
display: flex;
flex-direction: column;
gap: 0.12rem;
gap: px2vh(12);
.module-card {
// background: linear-gradient(135deg, rgba(30, 58, 138, 0.3) 0%, rgba(15, 23, 42, 0.8) 100%);
// border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: 8px;
padding: 0.2rem 0.2rem 0.2rem 0.4rem;
padding: px2vh(20) px2vw(20) px2vh(20) px2vw(40);
display: flex;
flex-direction: column;
}
@@ -834,27 +813,27 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.08rem;
// margin-bottom: px2vh(8);
}
.module-title {
display: flex;
align-items: center;
gap: 0.1rem;
font-size: 0.2rem;
gap: px2vw(10);
font-size: px2vw(20);
font-weight: bold;
color: #e2e8f0;
}
.title-icon {
width: 0.06rem;
height: 0.24rem;
width: px2vw(6);
height: px2vh(24);
background: linear-gradient(180deg, #00d4ff 0%, #3b82f6 100%);
border-radius: 2px;
}
.module-more {
font-size: 0.18rem;
font-size: px2vw(18);
font-weight: bold;
color: #e2e8f0;
cursor: pointer;
@@ -870,7 +849,7 @@
.alarm-pending-chart {
flex: 1;
min-height: 1.2rem;
min-height: px2vh(120);
}
.alert-distribution-module {
@@ -878,12 +857,12 @@
}
.alert-tab {
padding: 0.06rem 0.15rem;
padding: px2vh(6) px2vw(15);
background: rgba(30, 58, 138, 0.3);
border: 1px solid rgba(59, 130, 246, 0.3);
border-radius: 4px;
color: #94a3b8;
font-size: 0.16rem;
font-size: px2vw(16);
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
@@ -898,34 +877,34 @@
.alert-distribution-content {
display: flex;
gap: 0.4rem;
gap: px2vw(40);
flex: 1;
}
.alert-ring-chart {
flex: 1;
min-height: 2rem;
min-height: px2vh(200);
}
.alert-list {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.12rem;
gap: px2vh(12);
}
.alert-item {
display: flex;
align-items: center;
gap: 0.12rem;
font-size: 0.18rem;
gap: px2vw(12);
font-size: px2vw(18);
font-weight: bold;
white-space: nowrap;
}
.alert-dot {
width: 0.16rem;
height: 0.16rem;
width: px2vw(16);
height: px2vw(16);
border-radius: 2px;
}
@@ -941,8 +920,8 @@
.alert-count {
color: #e2e8f0;
font-weight: bold;
font-size: 0.2rem;
margin-right: 0.06rem;
font-size: px2vw(20);
margin-right: px2vw(6);
white-space: nowrap;
}
@@ -958,7 +937,7 @@
.alert-trend-chart {
flex: 1;
min-height: 1.2rem;
min-height: px2vh(120);
}
.work-order-module {
@@ -967,7 +946,7 @@
.work-order-content {
display: flex;
gap: 0.3rem;
gap: px2vw(30);
flex: 1;
}
@@ -976,8 +955,8 @@
display: flex;
flex-direction: column;
align-items: center;
gap: 0.12rem;
padding: 0.1rem;
gap: px2vh(12);
padding: px2vh(10);
background: rgba(30, 58, 138, 0.2);
border-radius: 8px;
border: 1px solid rgba(59, 130, 246, 0.3);
@@ -994,13 +973,13 @@
}
.order-label {
font-size: 0.22rem;
font-size: px2vw(22);
color: #e2e8f0;
margin-bottom: 0.08rem;
margin-bottom: px2vh(8);
}
.order-count {
font-size: 0.36rem;
font-size: px2vw(36);
font-weight: bold;
}
@@ -1026,19 +1005,16 @@
.card {
background-color: rgba(15, 23, 42, 0.8);
// border: 1px solid #1e3a8a;
// border-radius: 8px;
// padding: 15px;
display: flex;
flex-direction: column;
position: relative;
}
.card-title {
font-size: 16px;
font-size: px2vw(16);
font-weight: bold;
color: #94a3b8;
margin-bottom: 15px;
margin-bottom: px2vh(15);
text-align: center;
}
@@ -1052,31 +1028,31 @@
.map-control {
position: absolute;
top: 15px;
left: 15px;
top: px2vh(15);
left: px2vw(15);
background-color: rgba(15, 23, 42, 0.9);
border: 1px solid #1e3a8a;
border-radius: 8px;
padding: 15px;
padding: px2vh(15) px2vw(15);
z-index: 1000;
min-width: 120px;
min-width: px2vw(120);
}
.control-top {
margin-bottom: 15px;
padding-bottom: 15px;
margin-bottom: px2vh(15);
padding-bottom: px2vh(15);
border-bottom: 1px solid #1e3a8a;
}
.control-title {
font-size: 14px;
font-size: px2vw(14);
font-weight: bold;
color: #64748b;
margin-bottom: 5px;
margin-bottom: px2vh(5);
}
.control-value {
font-size: 26px;
font-size: px2vw(26);
font-weight: bold;
color: #3b82f6;
}
@@ -1084,21 +1060,21 @@
.status-list {
display: flex;
flex-direction: column;
gap: 8px;
gap: px2vh(8);
}
.status-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
gap: px2vw(8);
font-size: px2vw(14);
font-weight: bold;
color: #e2e8f0;
}
.status-dot {
width: 10px;
height: 10px;
width: px2vw(10);
height: px2vw(10);
border-radius: 50%;
}
@@ -1116,6 +1092,7 @@
.top2 {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}

4
src/view/layout/aside/normalMode.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="relative h-full bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900 border-r shadow dark:shadow-gray-700"
class="gva-industrial-aside relative h-full bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900 border-r shadow dark:shadow-gray-700"
:class="isCollapse ? '' : ' px-2'"
:style="{
width: layoutSideWidth + 'px'
@@ -25,7 +25,7 @@
</el-menu>
</el-scrollbar>
<div
class="absolute bottom-8 right-2 w-8 h-8 bg-gray-50 dark:bg-slate-800 flex items-center justify-center rounded cursor-pointer"
class="gva-industrial-collapse absolute bottom-8 right-2 w-8 h-8 bg-gray-50 dark:bg-slate-800 flex items-center justify-center rounded cursor-pointer"
:class="isCollapse ? 'right-0 left-0 mx-auto' : 'right-2'"
@click="toggleCollapse"
>

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

@@ -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-industrial-header 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"
>
<div class="flex items-center cursor-pointer flex-1">
<div

4
src/view/layout/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="bg-gray-50 text-slate-700 dark:text-slate-500 dark:bg-slate-800 w-screen h-screen">
<div class="gva-industrial-layout bg-gray-50 text-slate-700 dark:text-slate-500 dark:bg-slate-800 w-screen h-screen">
<el-watermark
v-if="config.show_watermark"
:font="font"
@@ -21,7 +21,7 @@
<gva-aside v-if="config.side_mode === 'combination' && device !== 'mobile'" mode="normal" />
<div class="flex-1 w-0 h-full">
<gva-tabs v-if="config.showTabs" />
<div class="overflow-auto px-2" :class="config.showTabs ? 'gva-container2' : 'gva-container pt-1'">
<div class="gva-industrial-main overflow-auto px-2" :class="config.showTabs ? 'gva-container2' : 'gva-container pt-1'">
<router-view v-if="reloadFlag" v-slot="{ Component, route }">
<div id="gva-base-load-dom" class="gva-body-h bg-gray-50 dark:bg-slate-800">
<transition mode="out-in" :name="route.meta.transitionType || config.transition_type">

2
src/view/masterStation/equipment/components/detail/index.vue
View File

@@ -47,7 +47,7 @@
}
</script>
<style lang="scss" scoped>
<style lang="scss">
.device-detail-page {
// padding: 20px;
.tabs-box {

2
src/view/masterStation/equipment/components/list/index.vue
View File

@@ -234,7 +234,7 @@
}
</script>
<style lang="scss" scoped>
<style lang="scss">
// 设备卡片容器
.container-device {
padding: 24px;

2
src/view/masterStation/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div>
<div class="master-station-theme">
<router-view v-slot="{ Component }">
<transition mode="out-in" name="el-fade-in-linear">
<keep-alive :include="routerStore.keepAliveRouters">