SaaS-lib/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/index.vue

<template>
  <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">
          <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">
          <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"
          style="position: absolute; right: 130px; z-index: 99; top: 75px"
          @click="backequipmentAlarm"
          >返回</a-button
        >
        <!-- 新增 或 编辑 设备告警 -->
        <editeEquipmentAlarm ref="editEquipmentAlarm" @editObject="editObject" />
        <!-- 配置设备告警-->
        <configureDeviceAlarms v-show="!equipmentAlarm" ref="configureDeviceAlarms" />
      </a-tab-pane>
      <a-tab-pane key="3" tab="能源告警">
        <energyAlarm class="full-height" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script lang="ts">
  import { notificationtableConfig } from './ts/notificationManagementConfig';
  import { equipmentAlarmTableConfig } from './ts/equipmentAlarmConfig';
  import { ref } from 'vue';
  import energyAlarm from './components/energyAlarm.vue';
  import editeEquipmentAlarm from './equipmentAlarm/editeEquipmentAlarm.vue';
  import configureDeviceAlarms from './equipmentAlarm/configureDeviceAlarms.vue';
  export default {
    name: 'AlarmSettings',
    components: { energyAlarm, editeEquipmentAlarm, configureDeviceAlarms },
    setup() {
      const mainRef = ref();
      const editEquipmentAlarm = ref();
      const configureDeviceAlarms = ref();
      const equipmentAlarm = ref(true);
      const notificationConfig = notificationtableConfig(null, null, null);
      const equipmentAlarmConfig = equipmentAlarmTableConfig(
        editEquipmentAlarm,
        null,
        equipmentAlarm,
        configureDeviceAlarms,
      );
      const callback = (key: any) => {
        console.log(key);
      };
      //返回设备告警
      const backequipmentAlarm = () => {
        equipmentAlarm.value = !equipmentAlarm.value;
        configureDeviceAlarms.value.show = false;
      };
      const clickSwitch = (data: any) => {
        console.log(data, '数据');
        mainRef.value?.nsTableRef.reload();
      };
      // 编辑或添加成功 刷新列表
      const editObject = () => {
        console.log('添加成功 刷新列表');
        mainRef.value?.nsTableRef.reload();
        // console.log(newList.value.formFinish, '数据');
      };
      return {
        callback,
        notificationConfig,
        equipmentAlarmConfig,
        editObject,
        clickSwitch,
        editEquipmentAlarm,
        configureDeviceAlarms,
        equipmentAlarm,
        backequipmentAlarm,
        mainRef,
      };
    },
  };
</script>
<style lang="less" scoped>
  .box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .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>