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

<template>
  <ns-drawer
    v-model:visible="visible"
    width="562px"
    :title="' '"
    :footer-style="{ textAlign: 'right' }"
    :ok="btnClick"
    :cancel="handleClose"
    @close="handleClose"
    placement="right">
    <div class="ns-title-extra-box title">
      <span style="margin-left: 6px">{{ infoObject?.id ? '编辑' : '新增' }}</span>
    </div>
    <div style="padding: 18px; width: 100%; overflow: hidden">
      <a-form ref="formRef" :model="infoObject" :rules="rules">
        <a-form-item ref="site" label="站点" name="site">
          <a-tree-select
            v-model:value="infoObject.site"
            show-search
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="请选择站点"
            allow-clear
            tree-default-expand-all
            :tree-data="siteDataTree"
            :field-names="{
              children: 'linkList',
              label: 'orgName',
              value: 'orgId',
            }"
            tree-node-filter-prop="orgName" />
        </a-form-item>
        <a-form-item label="数据来源" name="dataSources">
          <a-cascader
            v-model:value="infoObject.dataSources"
            :options="deviceTypeTreeData"
            :field-names="{
              children: 'children',
              label: 'cnValue',
              value: 'id',
            }"
            :show-search="{ filterDeviceType }"
            @change="selectDeviceType"
            placeholder="请选择数据来源" />
        </a-form-item>
        <a-form-item label="设备/节点" name="deviceNode">
          <a-tree-select
            v-model:value="infoObject.deviceNode"
            style="width: 100%"
            placeholder="请选择设备节点"
            :disabled="!infoObject.dataSources"
            :tree-line="true && { showLeafIcon: false }"
            :tree-data="jdTreeData"
            :field-names="{
              children: 'children',
              label:
                infoObject.dataSources && infoObject.dataSources[1] === 1
                  ? 'deviceName'
                  : 'pointName',
              value:
                infoObject.dataSources && infoObject.dataSources[1] === 1 ? 'deviceInfoCode' : 'id',
            }" />
        </a-form-item>
        <a-form-item label="启用规则">
          <a-switch
            :checked="infoObject.enableRules === 1 ? true : false"
            :class="{
              'blue-background': infoObject.enableRules === 1 ? true : false,
              'grey-background': infoObject.enableRules === 1 ? false : true,
            }"
            @click="clickSwitch" />
        </a-form-item>
        <a-form-item label="异常描述" name="abnormalDescription">
          <a-textarea
            v-model:value="infoObject.abnormalDescription"
            style="height: 32px"
            placeholder="请输入异常描述"
            :autoSize="{ minRows: 1, maxRows: 1 }"
            show-count
            :maxlength="30" />
        </a-form-item>
        <a-form-item label="规则类型" name="ruleType">
          <a-radio-group v-model:value="infoObject.ruleType">
            <a-radio value="1">且 (and) </a-radio>
            <a-radio value="2">或 (or) </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="对比类型" name="comparisonType">
          <a-cascader
            v-model:value="infoObject.comparisonType"
            :options="comparisonTypeData"
            :showSearch="false"
            placeholder="请选择对比类型" />
        </a-form-item>
        <div class="card-log">
          <template v-for="index in infoObject.alarmList?.length" :key="index">
            <div style="width: 100%; display: flex; margin-left: 22px; padding: 12px 14px 12px 0px">
              <span class="title-name" style="line-height: 32px">{{ `逻辑${index}:` }}</span>
              <a-select
                v-model:value="infoObject.alarmList[index - 1].logic"
                style="width: 110px; margin-left: 16px"
                placeholder="请选择逻辑"
                :options="logicEnum" />
              <span class="title-name" style="line-height: 32px; margin-left: 32px">{{
                `数值${index}:`
              }}</span>
              <a-input-number
                style="width: 110px; margin-left: 6px"
                placeholder="请输入数值"
                :min="-99999999.99"
                :max="99999999.99"
                :precision="2"
                v-model:value="infoObject.alarmList[index - 1].num" />
              <div
                v-if="index > 1 && index === infoObject.alarmList?.length"
                style="
                  cursor: pointer;
                  width: 20px;
                  height: 32px;
                  display: flex;
                  align-items: center;
                  margin-left: 16px;
                "
                @click="addAlarmList">
                <img style="width: 16px" src="../../../../../src/icon/add.png" />
              </div>
              <div
                v-if="index > 1 && infoObject.alarmList?.length > 2"
                style="
                  cursor: pointer;
                  width: 20px;
                  height: 32px;
                  display: flex;
                  align-items: center;
                  margin-left: 16px;
                "
                @click="deleteAlarmList(index - 1)">
                <img style="width: 17px" src="../../../../../src/icon/del.png" />
              </div>
            </div>
            <div
              v-if="
                infoObject.alarmList[index - 1]?.num === '' ||
                infoObject.alarmList[index - 1]?.logic === null
              "
              style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
              请选择正确的逻辑{{ index }} 或 输入正确的数值{{ index }}
            </div>
          </template>
          <div
            v-if="infoObject.alarmList?.length < 2"
            style="width: 100%; color: #ff4d4f; text-align: center; margin-bottom: 5px">
            逻辑至少2条
          </div>
        </div>
      </a-form>
    </div>
  </ns-drawer>
</template>
<script lang="ts" setup>
  import { NsMessage } from '/nerv-lib/component';
  import { ref } from 'vue';
  import type { SelectProps } from 'ant-design-vue';
  import type { ShowSearchType } from 'ant-design-vue/es/cascader';
  import { device, group } from '/@/api/deviceManage';
  import { energyAlarms } from '/@/api/alarmManagement/alarmSettings/energyAlarm';
  import { http } from '/nerv-lib/util';
  import { dict, getEnum } from '/@/api';

  const visible = ref(false);
  //父级数据
  const energyAlarm = ref({});
  //组织id
  const orgId = ref('');
  const result = JSON.parse(sessionStorage.getItem('ORGID')!);
  orgId.value = result;
  //表单数据
  const infoObject = ref({
    id: null,
    site: null,
    deviceNode: null,
    ruleType: null,
    abnormalDescription: null,
    dataSources: null,
    enableRules: 0,
    alarmList: [
      { id: null, logic: null, num: '', isDelete: 0 },
      { id: null, logic: null, num: '', isDelete: 0 },
    ],
  });
  const emit = defineEmits(['editObject']);
  //删除的逻辑列表
  const delAlarmList = ref([]);
  //对比类型
  const comparisonTypeData = ref([
    {
      value: '1',
      label: '数值',
      children: [
        {
          value: '1',
          label: '输入数值',
        },
        {
          value: '2',
          label: '同比',
        },
        {
          value: '3',
          label: '环比',
        },
        {
          value: '4',
          label: '对比基准',
        },
      ],
    },
    {
      value: '2',
      label: '比例',
      children: [
        {
          value: '1',
          label: '输入比例',
        },
        {
          value: '2',
          label: '同比',
        },
        {
          value: '3',
          label: '环比',
        },
        {
          value: '4',
          label: '对比基准',
        },
      ],
    },
  ]);
  const formRef = ref();
  //站点数
  const siteDataTree = ref([]);
  //数据来源
  let deviceTypeTreeData = ref([]);
  //节点数据
  const jdTreeData = ref([]);
  //选择设备时 获取的数据
  // 选择 数据来源 查询 设备节点
  const selectDeviceType = async (value: any, selectedOptions: any) => {
    if (!infoObject.value.id) {
      infoObject.value.deviceNode = null;
    }
    if (value[value.length - 1] === 1) {
      //选择设备
      await http
        .post(device.queryDevicePage, {
          pageNum: 1,
          pageSize: 999,
          energyType: selectedOptions[0].dicKey,
          orgId: orgId.value,
        })
        .then((res) => {
          jdTreeData.value = res.data.records;
        });
    } else {
      //选择节点时 获取数据
      await http
        .post(group.queryDeviceGroupTree, {
          pageNum: 1,
          pageSize: 999,
          energyType: selectedOptions[0].dicKey,
          orgId: orgId.value,
        })
        .then((res) => {
          jdTreeData.value = res.data;
        });
    }
  };

  //搜索设备类型
  const filterDeviceType: ShowSearchType['filter'] = (inputValue: any, path: any) => {
    return path.some(
      (option: any) => option.cnValue.toLowerCase().indexOf(inputValue.toLowerCase()) > -1,
    );
  };
  //逻辑
  const logicEnum = ref<SelectProps['options']>([]);
  //开关
  const clickSwitch = () => {
    if (infoObject.value.enableRules === 1) {
      infoObject.value.enableRules = 0;
    } else {
      infoObject.value.enableRules = 1;
    }
  };
  //父调子 页面显示方法
  const toggle = async (value: any, info: any) => {
    let enumData = await getEnum({ params: { enumType: 'LogicEnum' } });
    logicEnum.value = enumData.data;
    // 数据来源
    let energyType = await dict({ params: { dicKey: 'ENERGY_TYPE' } });
    if (energyType.data.data) {
      energyType.data.data.forEach((item: any) => {
        item.children = [
          {
            id: 1,
            cnValue: '设备',
          },
          {
            id: 2,
            cnValue: '节点',
          },
        ];
      });
      deviceTypeTreeData.value = energyType.data.data;
    } else {
      deviceTypeTreeData.value = [];
    }

    //能源告警
    energyAlarm.value = info;
    // 获取站点数据
    http.post('/carbon-smart/user/login/logInInfo', {}).then((res) => {
      if (res.msg === 'success') {
        siteDataTree.value = res.data.linkList;
      }
    });
    //判断 是新增 还是修改
    if (value) {
      await http.post(energyAlarms.configFindById, { id: value.id }).then((res) => {
        if (res.msg === 'success') {
          infoObject.value = res.data;
          // 拼凑成 修改回显形式
          infoObject.value.dataSources = [
            infoObject.value.dataSourcesType,
            infoObject.value.dataSourcesWay,
          ];
          //设备节点
          if (infoObject.value.dataSourcesWay === 2) {
            infoObject.value.deviceNode = Number(infoObject.value.deviceNode);
          }
          delete infoObject.value.dataSourcesType;
          delete infoObject.value.dataSourcesWay;
          infoObject.value.comparisonType = infoObject.value.comparisonType.split(',');
          infoObject.value.ruleType = infoObject.value.ruleType + '';
          //枚举 需要重新赋值
          if (
            infoObject.value.hxAlarmRuleLogicList &&
            infoObject.value.hxAlarmRuleLogicList.length > 0
          ) {
            infoObject.value.hxAlarmRuleLogicList.forEach((item: any) => {
              item.logic = item.logic.value;
            });
          }
          infoObject.value.alarmList = infoObject.value.hxAlarmRuleLogicList || [];
          delete infoObject.value.hxAlarmRuleLogicList;
          //获取设备/节点

          if (deviceTypeTreeData && deviceTypeTreeData.value.length > 0) {
            deviceTypeTreeData.value.forEach((item: any) => {
              if (item.id === infoObject.value.dataSources[0]) {
                selectDeviceType(infoObject.value.dataSources, [{ ...item }]);
              }
            });
          }
        }
      });
    } else {
      infoObject.value = {
        id: null,
        site: null,
        deviceNode: null,
        ruleType: null,
        abnormalDescription: null,
        dataSources: null,
        enableRules: 0,
        alarmList: [
          { id: null, logic: null, num: '', isDelete: 0 },
          { id: null, logic: null, num: '', isDelete: 0 },
        ],
      };
      infoObject.value.site = orgId.value;
    }
    visible.value = !visible.value;
  };
  //表单 判断规格
  const rules = {
    site: [{ required: true, message: '请选择站点', trigger: 'change' }],
    dataSources: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
    deviceNode: [{ required: true, message: '请选择设备名称', trigger: 'change' }],
    comparisonType: [{ required: true, message: '请选择对比类型', trigger: 'change' }],
    ruleType: [{ required: true, message: '请选择规则类型', trigger: 'change' }],
    abnormalDescription: [
      {
        required: true,
        message: '请输入异常描述',
        trigger: 'blur',
        validator: (rules: any, abnormalDescription: any, cbfn: any) => {
          if (abnormalDescription && abnormalDescription.trim() !== '') {
            cbfn();
          } else {
            cbfn('告警标题不能为空');
          }
        },
      },
    ],
  };
  const getBoolean = () => {
    for (const item of infoObject.value.alarmList) {
      if (item.logic === null || item.num === '') {
        return false;
      }
    }
    const numSet = new Set();
    for (const item of infoObject.value.alarmList) {
      if (numSet.has(item.num)) {
        NsMessage.error('请输入正确数值');
        return false; // 如果 num 已经存在于 Set 中，说明有重复，返回 false
      }
      numSet.add(item.num); // 添加 num 到 Set 中
    }

    if (infoObject.value.alarmList.length < 2) {
      NsMessage.error('请选择逻辑和数值');
      return false;
    }
    return true;
  };
  // 确认按钮
  const btnClick = async () => {
    let formBoolean = await getBoolean();
    //数据是否验证通过
    if (formBoolean) {
      formRef.value.validate().then(() => {
        //处理数据
        let data = { ...infoObject.value };
        if (!data.orgId) {
          data.orgId = orgId.value;
        }
        //关联能耗告警id
        data.energyConsumptionAlarmId = energyAlarm.value.id;
        data.errorCode = energyAlarm.value.errorCode;
        data.dataSourcesType = data.dataSources[0];
        data.dataSourcesWay = data.dataSources[1];
        delete data.dataSources;
        data.hxAlarmRuleLogicList = [...infoObject.value.alarmList, ...delAlarmList.value];
        data.comparisonType = data.comparisonType.toString();
        data.hxAlarmRuleLogicList.forEach((item) => {
          const num = Number(item.num);
          if (!isNaN(num)) {
            item.num = Number(num.toFixed(2));
          } else {
            item.num = 0; // 可以设置为0或其他默认值
          }
        });
        data.ruleType = Number(data.ruleType);
        delete data.alarmList;
        http
          .post(energyAlarms.configAddOrUpNewData, data)
          .then((res) => {
            if (res.msg === 'success') {
              // 操作成功时的处理
              if (data.id) {
                NsMessage.success('告警规则编辑成功');
              } else {
                NsMessage.success('告警规则新增成功');
              }
              emit('editObject', null);
              handleClose();
            }
          })
          .catch((error) => {
            // 错误处理
            console.error('请求失败：', error);
          });
      });
    }
  };
  //取消按钮
  const handleClose = () => {
    // 清楚校验错误信息
    formRef.value.resetFields();
    //对象清空
    infoObject.value = {
      id: null,
      site: null,
      ruleType: null,
      deviceNode: null,
      abnormalDescription: null,
      dataSources: null,
      enableRules: 0,
      alarmList: [
        { id: null, logic: null, num: '', isDelete: 0 },
        { id: null, logic: null, num: '', isDelete: 0 },
      ],
    };
    visible.value = false;
    delAlarmList.value = [];
  };
  // 新增逻辑列表
  const addAlarmList = () => {
    if (infoObject.value.alarmList) {
      infoObject.value.alarmList.push({ id: null, logic: null, num: '', isDelete: 0 });
    } else {
      infoObject.value.alarmList = [{ id: null, logic: null, num: '', isDelete: 0 }];
    }
  };
  // 删除 逻辑列表、
  const deleteAlarmList = (index: number) => {
    if (index < infoObject.value.alarmList.length && index >= 0) {
      const alarmItemToDelete = infoObject.value.alarmList[index];
      if (alarmItemToDelete?.id) {
        // 添加到 delAlarmList 中，并标记为已删除
        delAlarmList.value.push({ ...alarmItemToDelete, isDelete: 1 });
      }
      // 从 infoObject 中删除该元素
      infoObject.value.alarmList.splice(index, 1);
    }
  };
  defineExpose({
    toggle,
    handleClose,
    formRef,
  });
</script>
<style scoped lang="less">
  .drawerContainer {
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
  .title {
    width: 200px;
    height: 22px;
    opacity: 1;
    /** 文本1 */
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 21px;
    color: rgba(51, 51, 51, 1);
    margin-left: 24px;
  }
  .blue-background.ant-switch-checked {
    background-color: linear-gradient(
      180deg,
      rgba(1, 206, 255, 1) 0%,
      rgba(57, 215, 187, 1) 100%
    ) !important;
  }

  .grey-background.ant-switch {
    background-color: rgba(238, 238, 238, 1) !important;
  }

  .blue-background.ant-switch-checked .ant-switch-handle {
    background-color: linear-gradient(
      180deg,
      rgba(1, 206, 255, 1) 0%,
      rgba(57, 215, 187, 1) 100%
    ) !important;
  }
  .ant-switch-checked {
    background-color: rgba(57, 215, 187, 1) !important;
  }
  .grey-background.ant-switch .ant-switch-handle {
    background-color: rgba(238, 238, 238, 1) !important;
  }
  :deep(.ant-form-item-label) {
    z-index: 20;
    text-align: right;
    width: 20%;
  }
  .card-log {
    width: 100%;
    height: auto;
    border-radius: 4px;
    background: rgba(250, 250, 250, 1);
    padding-bottom: 12px;
    .title-name::before {
      display: inline-block;
      margin-right: 4px;
      color: #ff4d4f;
      font-size: 14px;
      font-family: SimSun, sans-serif;
      line-height: 1;
      content: '*';
    }
  }
</style>