代码更新

This commit is contained in:
ZhengMingKing
2026-06-12 23:39:02 +08:00
parent 89f5f5bd10
commit 86492f2e50
4 changed files with 152 additions and 12 deletions

View File

@@ -3,8 +3,8 @@
<div class="left">
<div class="title">
<span>线路列表</span>
<el-button :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
<el-button :disabled="!checkedDevices.length" plain size="small" type="danger">一键合闸</el-button>
<el-button class="switch-action-button" :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
<el-button class="switch-action-button" :disabled="!checkedDevices.length" plain size="small" type="danger">一键合闸</el-button>
</div>
<div>
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
@@ -188,6 +188,41 @@
}
}
:deep(.switch-action-button.el-button--success.is-plain) {
--el-button-text-color: #34d399;
--el-button-border-color: rgba(52, 211, 153, 0.72);
--el-button-bg-color: rgba(6, 78, 59, 0.42);
--el-button-hover-text-color: #d1fae5;
--el-button-hover-border-color: rgba(52, 211, 153, 0.9);
--el-button-hover-bg-color: rgba(16, 185, 129, 0.32);
--el-button-active-text-color: #d1fae5;
--el-button-active-border-color: rgba(52, 211, 153, 0.95);
--el-button-active-bg-color: rgba(16, 185, 129, 0.42);
box-shadow: inset 0 0 12px rgba(52, 211, 153, 0.12), 0 0 10px rgba(52, 211, 153, 0.12);
}
:deep(.switch-action-button.el-button--danger.is-plain) {
--el-button-text-color: #f87171;
--el-button-border-color: rgba(248, 113, 113, 0.72);
--el-button-bg-color: rgba(127, 29, 29, 0.42);
--el-button-hover-text-color: #fee2e2;
--el-button-hover-border-color: rgba(248, 113, 113, 0.9);
--el-button-hover-bg-color: rgba(239, 68, 68, 0.32);
--el-button-active-text-color: #fee2e2;
--el-button-active-border-color: rgba(248, 113, 113, 0.95);
--el-button-active-bg-color: rgba(239, 68, 68, 0.42);
box-shadow: inset 0 0 12px rgba(248, 113, 113, 0.12), 0 0 10px rgba(248, 113, 113, 0.12);
}
:deep(.switch-action-button.is-disabled),
:deep(.switch-action-button.is-disabled:hover),
:deep(.switch-action-button.is-disabled:focus) {
color: rgba(226, 232, 240, 0.48) !important;
border-color: rgba(148, 163, 184, 0.3) !important;
background: rgba(15, 23, 42, 0.68) !important;
box-shadow: none;
}
.line-item {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;

View File

@@ -18,8 +18,8 @@
<div class="left">
<div class="title">
<span>线路列表</span>
<el-button :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
<el-button :disabled="!checkedDevices.length" plain size="small" type="danger">一键合闸</el-button>
<el-button class="switch-action-button" :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
<el-button class="switch-action-button" :disabled="!checkedDevices.length" plain size="small" type="danger">一键合闸</el-button>
</div>
<div>
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
@@ -101,10 +101,10 @@
</div>
<div class="other realtime-data-panel">
<div class="realtime-actions">
<el-button :disabled="circuitBreaker.device?.deviceStatus == 1" type="danger" plain @click="changeStatus"
<el-button class="switch-action-button" :disabled="circuitBreaker.device?.deviceStatus == 1" type="danger" plain @click="changeStatus"
>合闸</el-button
>
<el-button :disabled="circuitBreaker.device?.deviceStatus == 0" type="success" plain @click="changeStatus"
<el-button class="switch-action-button" :disabled="circuitBreaker.device?.deviceStatus == 0" type="success" plain @click="changeStatus"
>分闸</el-button
>
</div>
@@ -572,6 +572,41 @@
}
}
:deep(.switch-action-button.el-button--success.is-plain) {
--el-button-text-color: #34d399;
--el-button-border-color: rgba(52, 211, 153, 0.72);
--el-button-bg-color: rgba(6, 78, 59, 0.42);
--el-button-hover-text-color: #d1fae5;
--el-button-hover-border-color: rgba(52, 211, 153, 0.9);
--el-button-hover-bg-color: rgba(16, 185, 129, 0.32);
--el-button-active-text-color: #d1fae5;
--el-button-active-border-color: rgba(52, 211, 153, 0.95);
--el-button-active-bg-color: rgba(16, 185, 129, 0.42);
box-shadow: inset 0 0 12px rgba(52, 211, 153, 0.12), 0 0 10px rgba(52, 211, 153, 0.12);
}
:deep(.switch-action-button.el-button--danger.is-plain) {
--el-button-text-color: #f87171;
--el-button-border-color: rgba(248, 113, 113, 0.72);
--el-button-bg-color: rgba(127, 29, 29, 0.42);
--el-button-hover-text-color: #fee2e2;
--el-button-hover-border-color: rgba(248, 113, 113, 0.9);
--el-button-hover-bg-color: rgba(239, 68, 68, 0.32);
--el-button-active-text-color: #fee2e2;
--el-button-active-border-color: rgba(248, 113, 113, 0.95);
--el-button-active-bg-color: rgba(239, 68, 68, 0.42);
box-shadow: inset 0 0 12px rgba(248, 113, 113, 0.12), 0 0 10px rgba(248, 113, 113, 0.12);
}
:deep(.switch-action-button.is-disabled),
:deep(.switch-action-button.is-disabled:hover),
:deep(.switch-action-button.is-disabled:focus) {
color: rgba(226, 232, 240, 0.48) !important;
border-color: rgba(148, 163, 184, 0.3) !important;
background: rgba(15, 23, 42, 0.68) !important;
box-shadow: none;
}
.line-item {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;

View File

@@ -3,8 +3,8 @@
<div class="left">
<div class="title">
<span>线路列表</span>
<el-button :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
<el-button :disabled="!checkedDevices.length" plain size="small" type="danger">一键合闸</el-button>
<el-button class="switch-action-button" :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
<el-button class="switch-action-button" :disabled="!checkedDevices.length" plain size="small" type="danger">一键合闸</el-button>
</div>
<div>
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
@@ -188,6 +188,41 @@
}
}
:deep(.switch-action-button.el-button--success.is-plain) {
--el-button-text-color: #34d399;
--el-button-border-color: rgba(52, 211, 153, 0.72);
--el-button-bg-color: rgba(6, 78, 59, 0.42);
--el-button-hover-text-color: #d1fae5;
--el-button-hover-border-color: rgba(52, 211, 153, 0.9);
--el-button-hover-bg-color: rgba(16, 185, 129, 0.32);
--el-button-active-text-color: #d1fae5;
--el-button-active-border-color: rgba(52, 211, 153, 0.95);
--el-button-active-bg-color: rgba(16, 185, 129, 0.42);
box-shadow: inset 0 0 12px rgba(52, 211, 153, 0.12), 0 0 10px rgba(52, 211, 153, 0.12);
}
:deep(.switch-action-button.el-button--danger.is-plain) {
--el-button-text-color: #f87171;
--el-button-border-color: rgba(248, 113, 113, 0.72);
--el-button-bg-color: rgba(127, 29, 29, 0.42);
--el-button-hover-text-color: #fee2e2;
--el-button-hover-border-color: rgba(248, 113, 113, 0.9);
--el-button-hover-bg-color: rgba(239, 68, 68, 0.32);
--el-button-active-text-color: #fee2e2;
--el-button-active-border-color: rgba(248, 113, 113, 0.95);
--el-button-active-bg-color: rgba(239, 68, 68, 0.42);
box-shadow: inset 0 0 12px rgba(248, 113, 113, 0.12), 0 0 10px rgba(248, 113, 113, 0.12);
}
:deep(.switch-action-button.is-disabled),
:deep(.switch-action-button.is-disabled:hover),
:deep(.switch-action-button.is-disabled:focus) {
color: rgba(226, 232, 240, 0.48) !important;
border-color: rgba(148, 163, 184, 0.3) !important;
background: rgba(15, 23, 42, 0.68) !important;
box-shadow: none;
}
.line-item {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;

View File

@@ -18,8 +18,8 @@
<div class="left">
<div class="title">
<span>线路列表</span>
<el-button :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
<el-button :disabled="!checkedDevices.length" plain size="small" type="danger">一键合闸</el-button>
<el-button class="switch-action-button" :disabled="!checkedDevices.length" plain size="small" type="success">一键分闸</el-button>
<el-button class="switch-action-button" :disabled="!checkedDevices.length" plain size="small" type="danger">一键合闸</el-button>
</div>
<div>
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
@@ -101,10 +101,10 @@
</div>
<div class="other realtime-data-panel">
<div class="realtime-actions">
<el-button :disabled="circuitBreaker.device?.deviceStatus == 1" type="danger" plain @click="changeStatus"
<el-button class="switch-action-button" :disabled="circuitBreaker.device?.deviceStatus == 1" type="danger" plain @click="changeStatus"
>合闸</el-button
>
<el-button :disabled="circuitBreaker.device?.deviceStatus == 0" type="success" plain @click="changeStatus"
<el-button class="switch-action-button" :disabled="circuitBreaker.device?.deviceStatus == 0" type="success" plain @click="changeStatus"
>分闸</el-button
>
</div>
@@ -574,6 +574,41 @@
}
}
:deep(.switch-action-button.el-button--success.is-plain) {
--el-button-text-color: #34d399;
--el-button-border-color: rgba(52, 211, 153, 0.72);
--el-button-bg-color: rgba(6, 78, 59, 0.42);
--el-button-hover-text-color: #d1fae5;
--el-button-hover-border-color: rgba(52, 211, 153, 0.9);
--el-button-hover-bg-color: rgba(16, 185, 129, 0.32);
--el-button-active-text-color: #d1fae5;
--el-button-active-border-color: rgba(52, 211, 153, 0.95);
--el-button-active-bg-color: rgba(16, 185, 129, 0.42);
box-shadow: inset 0 0 12px rgba(52, 211, 153, 0.12), 0 0 10px rgba(52, 211, 153, 0.12);
}
:deep(.switch-action-button.el-button--danger.is-plain) {
--el-button-text-color: #f87171;
--el-button-border-color: rgba(248, 113, 113, 0.72);
--el-button-bg-color: rgba(127, 29, 29, 0.42);
--el-button-hover-text-color: #fee2e2;
--el-button-hover-border-color: rgba(248, 113, 113, 0.9);
--el-button-hover-bg-color: rgba(239, 68, 68, 0.32);
--el-button-active-text-color: #fee2e2;
--el-button-active-border-color: rgba(248, 113, 113, 0.95);
--el-button-active-bg-color: rgba(239, 68, 68, 0.42);
box-shadow: inset 0 0 12px rgba(248, 113, 113, 0.12), 0 0 10px rgba(248, 113, 113, 0.12);
}
:deep(.switch-action-button.is-disabled),
:deep(.switch-action-button.is-disabled:hover),
:deep(.switch-action-button.is-disabled:focus) {
color: rgba(226, 232, 240, 0.48) !important;
border-color: rgba(148, 163, 184, 0.3) !important;
background: rgba(15, 23, 42, 0.68) !important;
box-shadow: none;
}
.line-item {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;