fix:简化ns-step组件 设备告警样式 设备告警 能源告警 添加字段

hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editConfigureDeviceAlarm.vue

@@ -190,7 +190,7 @@
     //获取该类型设备
     getDevicePage({
       orgId: orgId.value,
-      code: selectedOptions[selectedOptions.length - 1].code,
+      deviceCode: selectedOptions[selectedOptions.length - 1].code,
       pageNum: 1,
       pageSize: 999,
     });

hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/editeEquipmentAlarm.vue

@@ -8,18 +8,72 @@
     :cancel="handleClose"
     placement="right"
     @close="handleClose">
-    <ns-form ref="formRef" :schemas="schemas" :model="infoObject" formLayout="vertical" />
-    <div style="margin-left: 52px">
-      应用规则:
-      <a-switch
-        :checked="infoObject?.enableRules === 1 ? true : false"
-        :class="{
-          'blue-background': infoObject?.enableRules === 1 ? true : false,
-          'grey-background': infoObject?.enableRules === 1 ? false : true,
-        }"
-        style="margin-left: 6px"
-        @change="changeSwitch" />
-    </div>
+    <a-form ref="formRef" :model="infoObject" :rules="rules">
+      <a-form-item name="alarmTitle" label="告警标题">
+        <ns-input allowClear v-model:value="infoObject.alarmTitle" placeholder="请输入告警标题" />
+      </a-form-item>
+      <a-form-item label="告警频率" name="alarmFrequency">
+        <a-select
+          v-model:value="infoObject.alarmFrequency"
+          placeholder="请选择告警频率"
+          style="width: 100%"
+          allowClear
+          :options="alarmFrequencyData" />
+      </a-form-item>
+      <a-form-item v-if="infoObject.alarmFrequency === 2" name="repetitions" label="重复次数">
+        <ns-input-number v-model:value="infoObject.repetitions" placeholder="请输入重复次数" />
+      </a-form-item>
+      <a-form-item v-if="infoObject.alarmFrequency === 2" name="intervalDuration" label="间隔时长">
+        <ns-input-number
+          style="width: 60%"
+          v-model:value="infoObject.intervalDuration"
+          placeholder="请输入间隔时长" />
+        <a-select
+          v-model:value="infoObject.intervalDurationUnit"
+          placeholder="请选择间隔时长单位"
+          style="width: 40%"
+          allowClear
+          :options="intervalDurationUnitData" />
+      </a-form-item>
+      <a-form-item name="monitorTime" label="监测时长">
+        <ns-input-number
+          allowClear
+          v-model:value="infoObject.monitorTime"
+          placeholder="请输入监测时长" />
+      </a-form-item>
+      <a-form-item label="监测时长单位" name="monitorTimeUnit">
+        <a-select
+          v-model:value="infoObject.monitorTimeUnit"
+          placeholder="请选择监测时长单位"
+          style="width: 100%"
+          allowClear
+          :options="monitorTimeUnitData" />
+      </a-form-item>
+      <a-form-item label="优先级" name="priority">
+        <a-select
+          v-model:value="infoObject.priority"
+          placeholder="请选择优先级"
+          style="width: 100%"
+          allowClear
+          :options="priorityData" />
+      </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,
+          }"
+          style="margin-left: 6px"
+          @change="changeSwitch" />
+      </a-form-item>
+      <a-form-item label="是否创建工单" name="createWorkOrder">
+        <a-radio-group v-model:value="infoObject.createWorkOrder">
+          <a-radio value="1">是 </a-radio>
+          <a-radio value="0">否 </a-radio>
+        </a-radio-group>
+      </a-form-item>
+    </a-form>
   </ns-drawer>
 </template>
 <script lang="ts" setup>
@@ -32,11 +86,72 @@
   //表单数据
   const infoObject = ref({
     id: null,
-    accountNo: null,
+    alarmTitle: null,
+    alarmFrequency: null,
+    monitorTime: null,
+    monitorTimeUnit: null,
+    priority: null,
+    createWorkOrder: null,
     enableRules: 0,
   });
   const formRef = ref();
   const emit = defineEmits(['editObject']);
+  const alarmFrequencyData = ref([
+    {
+      label: '单次',
+      value: 1,
+    },
+    {
+      label: '重复',
+      value: 2,
+    },
+    {
+      label: '累计',
+      value: 3,
+    },
+  ]);
+  const monitorTimeUnitData = ref([
+    {
+      label: '分',
+      value: 1,
+    },
+    {
+      label: '时',
+      value: 2,
+    },
+    {
+      label: '天',
+      value: 3,
+    },
+  ]);
+  const intervalDurationUnitData = ref([
+    {
+      label: '分',
+      value: 1,
+    },
+    {
+      label: '时',
+      value: 2,
+    },
+    {
+      label: '天',
+      value: 3,
+    },
+  ]);
+  const priorityData = ref([
+    {
+      label: '紧急',
+      value: 1,
+    },
+    {
+      label: '重要',
+      value: 2,
+    },
+    {
+      label: '一般',
+      value: 3,
+    },
+  ]);
   const toggle = (value: any) => {
     //判断 是新增 还是修改
     if (value) {
@@ -50,174 +165,69 @@
     }
     visible.value = !visible.value;
   };
-  const schemas = [
-    {
-      field: 'basicInfo',
-      label: '',
-      displayFormItem: false,
-      class: 'ns-form-item-full',
-      component: 'NsChildForm',
-      componentProps: {
-        schemas: [
-          {
-            field: 'alarmTitle',
-            label: '告警标题',
-            component: 'NsInput',
-            rules: [
-              {
-                required: true,
-                message: '告警标题不能为空',
-                trigger: 'change',
-                validator: (rules: any, alarmTitle: any, cbfn: any) => {
-                  if (alarmTitle && alarmTitle.trim() !== '') {
-                    cbfn();
-                  } else {
-                    cbfn('告警标题不能为空');
-                  }
-                },
-              },
-            ],
-            componentProps: {
-              placeholder: '请输入告警标题',
-              maxLength: 20,
-            },
-          },
-          {
-            field: 'repetitions',
-            label: '重复次数',
-            rules: [
-              {
-                required: true,
-                message: '重复次数不能为空',
-                trigger: 'change',
-              },
-            ],
-            component: 'NsSelect',
-            componentProps: {
-              allowClear: true,
-              placeholder: '请选择重复次数',
-
-              options: [
-                {
-                  label: '单次',
-                  value: 1,
-                },
-                {
-                  label: '重复',
-                  value: 2,
-                },
-                {
-                  label: '累计',
-                  value: 3,
-                },
-              ],
-            },
-          },
-          {
-            field: 'monitorTime',
-            label: '检测时长',
-            component: 'NsInputNumber',
-            rules: [
-              {
-                required: true,
-                validator: (rules: any, value: any, cbfn: any) => {
-                  if (value && /^[0-9]*$/.test(value)) {
-                    cbfn();
-                  } else {
-                    cbfn('请输入正确的监测时长');
-                  }
-                },
-                trigger: 'change',
-              },
-            ],
-            componentProps: {
-              placeholder: '请输入监测时长',
-              // maxLength: 30,
-            },
-          },
-          {
-            field: 'monitorTimeUnit',
-            label: '监测时长单位',
-            component: 'NsSelect',
-            rules: [
-              {
-                required: true,
-                message: '监测时长单位不能为空',
-                trigger: 'change',
-              },
-            ],
-            componentProps: {
-              allowClear: true,
-              placeholder: '请选择监测时长单位',
-              options: [
-                {
-                  label: '分',
-                  value: 1,
-                },
-                {
-                  label: '时',
-                  value: 2,
-                },
-                {
-                  label: '天',
-                  value: 3,
-                },
-              ],
-            },
-          },
-          {
-            field: 'priority',
-            label: '优先级',
-            component: 'NsSelect',
-            rules: [
-              {
-                required: true,
-                message: '优先级不能为空',
-                trigger: 'change',
-              },
-            ],
-            componentProps: {
-              allowClear: true,
-              placeholder: '请选择优先级',
-              options: [
-                {
-                  label: '紧急',
-                  value: 1,
-                },
-                {
-                  label: '重要',
-                  value: 2,
-                },
-                {
-                  label: '一般',
-                  value: 3,
-                },
-              ],
-            },
-          },
-          {
-            label: '是否创建工单',
-            field: 'createWorkOrder',
-            component: 'NsRadioGroup',
-            rules: [
-              {
-                required: true,
-                message: '是否创建工单不能为空',
-                trigger: 'change',
-              },
-            ],
-            componentProps: {
-              radioType: 'radio',
-              options: [
-                { label: '是', value: 1 },
-                { label: '否', value: 0 },
-              ],
-            },
-          },
-        ],
+  //表单 判断规格
+  const rules = {
+    alarmTitle: [
+      {
+        required: true,
+        message: '请输入告警标题',
+        trigger: 'change',
+        validator: (rules: any, alarmTitle: any, cbfn: any) => {
+          if (alarmTitle && alarmTitle.trim() !== '') {
+            cbfn();
+          } else {
+            cbfn('告警标题不能为空');
+          }
+        },
       },
-    },
-  ];
+    ],
+    alarmFrequency: [{ required: true, message: '请选择告警频率', trigger: 'change' }],
+    monitorTime: [
+      {
+        required: true,
+        message: '请输入正确的监测时长',
+        trigger: 'change',
+        validator: (rules: any, monitorTime: any, cbfn: any) => {
+          if (monitorTime && monitorTime > 0) {
+            cbfn();
+          } else {
+            cbfn('请输入正确的监测时长');
+          }
+        },
+      },
+    ],
+    intervalDuration: [
+      {
+        required: true,
+        message: '请输入正确的间隔时长',
+        trigger: 'change',
+        validator: (rules: any, monitorTime: any, cbfn: any) => {
+          if (monitorTime && monitorTime > 0) {
+            cbfn();
+          } else {
+            cbfn('请输入正确的间隔时长');
+          }
+        },
+      },
+    ],
+    repetitions: [
+      {
+        required: true,
+        message: '请输入正确的重复次数',
+        trigger: 'change',
+        validator: (rules: any, repetitions: any, cbfn: any) => {
+          if (repetitions && repetitions > 0) {
+            cbfn();
+          } else {
+            cbfn('请输入正确的重复次数');
+          }
+        },
+      },
+    ],
+    createWorkOrder: [{ required: true, message: '请选择是否创建工单', trigger: 'change' }],
+    priority: [{ required: true, message: '请选择优先级', trigger: 'change' }],
+    monitorTimeUnit: [{ required: true, message: '请选择监测时长单位', trigger: 'change' }],
+  };
   //开关
   const changeSwitch = () => {
     switch (infoObject.value.enableRules) {
@@ -231,9 +241,16 @@
   };
   const btnClick = () => {
     //表单校验
-    formRef.value.triggerSubmit().then(() => {
+    formRef.value.validate().then(() => {
       //调用接口
-      http.post(deviceAlarms.addOrUpNewData, infoObject.value).then(() => {
+      let data = { ...infoObject.value };
+      data.createWorkOrder = Number(data.createWorkOrder);
+      if (data.alarmFrequency !== 2) {
+        data.repetitions = null;
+        data.intervalDuration = null;
+        data.intervalDurationUnit = null;
+      }
+      http.post(deviceAlarms.addOrUpNewData, data).then(() => {
         if (infoObject.value.id) {
           NsMessage.success('告警编辑成功');
         } else {
@@ -246,7 +263,7 @@
   };
   const handleClose = () => {
     // 清楚校验错误信息
-    formRef.value.formElRef.clearValidate();
+    formRef.value.resetFields();
     visible.value = false;
   };
   defineExpose({
@@ -284,4 +301,9 @@
   .grey-background.ant-switch .ant-switch-handle {
     background-color: grey !important;
   }
+  :deep(.ant-form-item-label) {
+    z-index: 20;
+    text-align: right;
+    width: 23%;
+  }
 </style>