perf(views): 初步添加“报警条件”组件

src/views/alarm-manage/AlarmConditions.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { t } from '@/i18n';
+
+import type { Rule } from 'ant-design-vue/es/form';
+import type { AlarmForm } from '@/types';
+
+interface Props {
+  alarmForm: AlarmForm;
+}
+const triggerForm = ref({
+  name: '',
+  value: '',
+});
+defineProps<Props>();
+const conditionType = ref([]);
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  value: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+};
+</script>
+
+<template>
+  <div>
+    <AForm ref="formRef" class="trigger-modal" :model="triggerForm" label-align="left" layout="vertical" :rules="rules">
+      <AFlex class="conditions-bgc" wrap="wrap">
+        <AFormItem label="执行动作" name="name">
+          <ASelect
+            class="select-input select-right"
+            v-model:value="triggerForm.name"
+            :options="conditionType"
+            :field-names="{ label: 'dataName', value: 'id' }"
+            :placeholder="$t('common.plzSelect')"
+          />
+        </AFormItem>
+        <AFormItem label="设备组" name="name">
+          <ASelect
+            class="select-input select-right"
+            v-model:value="triggerForm.name"
+            :options="conditionType"
+            :field-names="{ label: 'dataName', value: 'id' }"
+            :placeholder="$t('common.plzSelect')"
+          />
+        </AFormItem>
+        <AFormItem label="设备" name="name">
+          <ASelect
+            class="select-input select-right"
+            v-model:value="triggerForm.name"
+            :options="conditionType"
+            :field-names="{ label: 'dataName', value: 'id' }"
+            :placeholder="$t('common.plzSelect')"
+          />
+        </AFormItem>
+        <AFormItem label="设备参数" name="name">
+          <ASelect
+            class="select-input"
+            v-model:value="triggerForm.name"
+            :options="conditionType"
+            :field-names="{ label: 'dataName', value: 'id' }"
+            :placeholder="$t('common.plzSelect')"
+          />
+        </AFormItem>
+        <AFormItem label="运算符" name="name">
+          <ASelect
+            class="select-input select-right"
+            v-model:value="triggerForm.name"
+            :options="conditionType"
+            :field-names="{ label: 'dataName', value: 'id' }"
+            :placeholder="$t('common.plzSelect')"
+          />
+        </AFormItem>
+        <AFormItem label="阈值" name="name">
+          <AInput v-model:value="triggerForm.value" placeholder="请输入" class="select-input select-right" />
+        </AFormItem>
+      </AFlex>
+    </AForm>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.select-input {
+  width: 192px;
+}
+
+.select-right {
+  margin-right: 24px;
+}
+
+.conditions-bgc {
+  padding: 16px;
+  margin-top: 16px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+</style>