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 === 'enableRules'">
              <a-switch
                :checked="record.enableRules === 1 ? true : false"
                :class="{
                  'blue-background': record.enableRules === 1 ? true : false,
                  'grey-background': record.enableRules === 1 ? false : true,
                }"
                @change="clickSwitch({ enableRules: record.enableRules, 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"
          ref="mainRefEquipmentAlarm"
          class="table"
          v-bind="equipmentAlarmConfig">
          <template #bodyCell="{ record, column }">
            <template v-if="column.dataIndex === 'enableRules'">
              <a-switch
                :checked="record.enableRules === 1 ? true : false"
                :class="{
                  'blue-background': record.enableRules === 1 ? true : false,
                  'grey-background': record.enableRules === 1 ? false : true,
                }"
                @change="clickSwitch({ enableRules: record.enableRules, record: record })" />
            </template>
            <template v-if="column.dataIndex === 'monitor'">
              {{
                record?.monitorTime && record?.monitorTimeUnit
                  ? record?.monitorTime + record?.monitorTimeUnit
                  : '-'
              }}
            </template>
          </template>
        </ns-view-list-table>
        <a-button
          v-if="!equipmentAlarm"
          type="primary"
          style="position: absolute; right: 130px; z-index: 99; top: 80px; height: 30px"
          @click="backequipmentAlarm"
          >返回</a-button
        >
        <!-- 新增 或 编辑 设备告警 -->
        <editeEquipmentAlarm ref="editEquipmentAlarm" @editObject="editObject" />
        <!-- 配置设备告警-->
        <configureDeviceAlarms v-show="!equipmentAlarm" ref="configureDeviceAlarms" />
      </a-tab-pane>
      <a-tab-pane key="3" tab="能源告警">
        <ns-view-list-table
          v-bind="energyAlarmConfig"
          v-show="energyAlarm"
          ref="mainEnergyAlarmConfig"
          class="table">
          <template #bodyCell="{ record, column }">
            <template v-if="column.dataIndex === 'enableRules'">
              <a-switch
                :checked="record.enableRules === 1 ? true : false"
                :class="{
                  'blue-background': record.enableRules === 1 ? true : false,
                  'grey-background': record.enableRules === 1 ? false : true,
                }"
                @click="clickSwitch({ enableRules: record.enableRules, record: record })" />
            </template>
          </template>
        </ns-view-list-table>
        <a-button
          v-if="!energyAlarm"
          type="primary"
          style="position: absolute; right: 130px; z-index: 99; top: 80px; height: 30px"
          @click="backenergyAlarm"
          >返回</a-button
        >
        <!-- 新增 或 编辑 能源告警 -->
        <editeEnergyAlarm ref="editeEnergyAlarm" @editObject="editObject" />
        <!-- 配置能源告警-->
        <configureEnergyAlarms v-show="!energyAlarm" ref="configureEnergyAlarms" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script lang="ts">
  import { notificationtableConfig } from './ts/notificationManagementConfig';
  import { equipmentAlarmTableConfig } from './ts/equipmentAlarmConfig';
  import { energyAlarmConfigs } from './ts/energyAlarmConfig';
  import { ref, createVNode } from 'vue';
  import { http } from '/nerv-lib/util';
  import { NsMessage, NsModal } from '/nerv-lib/component';
  import editeEquipmentAlarm from './equipmentAlarm/editeEquipmentAlarm.vue';
  import editeEnergyAlarm from './energyAlarm/editeEnergyAlarm.vue';
  import configureEnergyAlarms from './energyAlarm/configureEnergyAlarms.vue';
  import configureDeviceAlarms from './equipmentAlarm/configureDeviceAlarms.vue';
  import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';

  export default {
    name: 'AlarmSettings',
    components: {
      editeEquipmentAlarm,
      configureDeviceAlarms,
      configureEnergyAlarms,
      editeEnergyAlarm,
    },
    setup() {
      const mainRef = ref();
      const mainRefEquipmentAlarm = ref();
      const mainEnergyAlarmConfig = ref();
      const editEquipmentAlarm = ref();
      const editeEnergyAlarm = ref();
      const configureDeviceAlarms = ref();
      const configureEnergyAlarms = ref();
      const equipmentAlarm = ref(true);
      const energyAlarm = ref(true);
      const notificationConfig = notificationtableConfig(null, mainEnergyAlarmConfig, null);
      //能源告警配置
      const energyAlarmConfig = energyAlarmConfigs(
        editeEnergyAlarm,
        mainRefEquipmentAlarm,
        energyAlarm,
        configureEnergyAlarms,
      );
      //设备告警配置
      const equipmentAlarmConfig = equipmentAlarmTableConfig(
        editEquipmentAlarm,
        mainRefEquipmentAlarm,
        equipmentAlarm,
        configureDeviceAlarms,
      );
      const callback = (key: any) => {
        console.log(key);
      };
      //返回设备告警
      const backequipmentAlarm = () => {
        equipmentAlarm.value = !equipmentAlarm.value;
        configureDeviceAlarms.value.show = false;
      };
      const backenergyAlarm = () => {
        energyAlarm.value = !energyAlarm.value;
        configureEnergyAlarms.value.show = false;
      };
      const clickSwitch = (data: any) => {
        console.log(data.record.enableRules === 1 ? '关闭' : '启用');
        NsModal.confirm({
          title: '启用状态',
          icon: createVNode(ExclamationCircleOutlined),
          content: '确定' + (data.record.enableRules === 1 ? '关闭' : '启用') + '吗?',
          onOk: () => {
            http
              .post(deviceAlarms.addOrUpNewData, {
                id: data.record.id,
                enableRules: data.record.enableRules === 1 ? 0 : 1,
              })
              .then(() => {
                NsMessage.success('操作成功');
                mainRefEquipmentAlarm.value?.nsTableRef.reload();
              });
          },
        });
      };
      // 编辑或添加成功 刷新列表
      const editObject = () => {
        mainRefEquipmentAlarm.value?.nsTableRef.reload();
        // console.log(newList.value.formFinish, '数据');
      };
      return {
        callback,
        notificationConfig,
        energyAlarmConfig,
        equipmentAlarmConfig,
        editObject,
        clickSwitch,
        editEquipmentAlarm,
        editeEnergyAlarm,
        configureDeviceAlarms,
        configureEnergyAlarms,
        equipmentAlarm,
        energyAlarm,
        backequipmentAlarm,
        backenergyAlarm,
        mainRef,
        mainRefEquipmentAlarm,
        mainEnergyAlarmConfig,
      };
    },
  };
</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>