fix: 还原工作组件 修改告警设置页面

This commit is contained in:
zhaohy
2024-07-08 11:24:24 +08:00
parent d004a06ec1
commit 3abdde797b
6 changed files with 54 additions and 243 deletions

View File

@@ -2,10 +2,34 @@
<div class="box">
<a-tabs default-active-key="1" @change="callback">
<a-tab-pane key="1" tab="通知管理">
<ns-view-list-table v-bind="notificationConfig" ref="mainRef" />
<ns-view-list-table v-bind="notificationConfig" ref="mainRef">
<template #bodyCell="{ record, column }">
<template v-if="column.dataIndex === 'isUse'">
<a-switch
v-model:checked="record.isUse"
:class="{
'blue-background': record.isUse,
'grey-background': !record.isUse,
}"
@click="clickSwitch({ isUse: record.isUse, record: record })" />
</template>
</template>
</ns-view-list-table>
</a-tab-pane>
<a-tab-pane key="2" tab="设备告警" force-render>
<ns-view-list-table v-show="equipmentAlarm" class="table" v-bind="equipmentAlarmConfig" />
<ns-view-list-table v-show="equipmentAlarm" class="table" v-bind="equipmentAlarmConfig">
<template #bodyCell="{ record, column }">
<template v-if="column.dataIndex === 'isUse'">
<a-switch
v-model:checked="record.isUse"
:class="{
'blue-background': record.isUse,
'grey-background': !record.isUse,
}"
@click="clickSwitch({ isUse: record.isUse, record: record })" />
</template>
</template>
</ns-view-list-table>
<a-button
v-if="!equipmentAlarm"
type="primary"
@@ -54,11 +78,10 @@
equipmentAlarm.value = !equipmentAlarm.value;
configureDeviceAlarms.value.show = false;
};
// const changeUse = () => {
// console.log(mainRef.value);
// mainRef.value?.nsTableRef.reload();
// // console.log(newList.value.formFinish, '数据');
// };
const clickSwitch = (data: any) => {
console.log(data, '数据');
mainRef.value?.nsTableRef.reload();
};
// 编辑或添加成功 刷新列表
const editObject = () => {
console.log('添加成功 刷新列表');
@@ -70,6 +93,7 @@
notificationConfig,
equipmentAlarmConfig,
editObject,
clickSwitch,
editEquipmentAlarm,
configureDeviceAlarms,
equipmentAlarm,
@@ -90,4 +114,27 @@
.full-height {
height: 100%; /* 设置高度为父容器高度 */
}
.blue-background.ant-switch-checked {
background-color: linear-gradient(
180deg,
rgba(1, 206, 255, 1) 0%,
rgba(0, 150, 229, 1) 100%
) !important;
}
.grey-background.ant-switch {
background-color: grey !important;
}
.blue-background.ant-switch-checked .ant-switch-handle {
background-color: linear-gradient(
180deg,
rgba(1, 206, 255, 1) 0%,
rgba(0, 150, 229, 1) 100%
) !important;
}
.grey-background.ant-switch .ant-switch-handle {
background-color: grey !important;
}
</style>