perf(views): 完善“报警条件”组件

src/views/alarm-manage/AlarmConditions.vue

@@ -1,84 +1,226 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, useTemplateRef } from 'vue';
 
+import DataSelection from '@/components/DataSelection.vue';
+import SvgIcon from '@/components/SvgIcon.vue';
 import { t } from '@/i18n';
 
-import type { Rule } from 'ant-design-vue/es/form';
-import type { AlarmForm } from '@/types';
+import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+import type { DataSelectionItem, DictValue, TriggerConditionItem } from '@/types';
 
 interface Props {
-  alarmForm: AlarmForm;
+  index: number;
+  form: TriggerConditionItem;
+  alarmCondition: DictValue[];
+  alarmRepeatTime: DictValue[];
+  alarmAlgOperator: DictValue[];
+  alarmDeviceState: DictValue[];
 }
-const triggerForm = ref({
-  name: '',
-  value: '',
-});
-defineProps<Props>();
-const conditionType = ref([]);
+
+const emit = defineEmits(['deleteClick']);
+const dataSelectionRef = useTemplateRef('dataSelection');
+const equipmentSelectionRef = useTemplateRef('equipmentSelection');
+const formRef = ref<FormInstance>();
+
+const props = defineProps<Props>();
+const parametersName = ref<string>('');
+const equipmentName = ref<string>('');
+
 const rules: Record<string, Rule[]> = {
-  name: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
-  value: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  subType: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  paramCode: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  deviceId: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  alarmAlgOperator: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  alarmThreshold: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  alarmDeviceState: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  alarmScheduledTime: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  alarmRepeatTime: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+};
+
+const deleteTriggerConditions = () => {
+  emit('deleteClick', props.index);
+};
+
+const formRefSubmit = () => {
+  return formRef.value?.validate() || Promise.resolve();
 };
+
+const parameterSelection = () => {
+  dataSelectionRef.value?.showView();
+  dataSelectionRef.value?.addAllGatewayList(-1);
+};
+
+const equipmentParameterSelection = () => {
+  equipmentSelectionRef.value?.showView();
+  equipmentSelectionRef.value?.addAllGatewayList(-1);
+};
+
+const confirmClick = (value: DataSelectionItem) => {
+  const { groupId, childGroupId, deviceId, parametersName: name, paramCode, selectType, deviceName } = value;
+  props.form.groupId = groupId;
+  props.form.childGroupId = childGroupId;
+  props.form.deviceId = deviceId;
+  if (selectType === 0) {
+    props.form.paramCode = paramCode;
+    parametersName.value = name;
+  }
+
+  if (selectType === 1) {
+    equipmentName.value = deviceName;
+  }
+  equipmentSelectionRef.value?.hideView();
+  dataSelectionRef.value?.hideView();
+};
+
+defineExpose({
+  formRefSubmit,
+});
 </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 ref="formRef" class="trigger-modal" :model="form" label-align="left" layout="vertical" :rules="rules">
+      <ABadge>
+        <template #count>
+          <SvgIcon @click="deleteTriggerConditions" class="icon-delete" name="close-circle" />
+        </template>
+        <AFlex class="conditions-bgc" wrap="wrap">
+          <AFormItem label="条件类型" name="subType">
+            <ASelect
+              class="select-input select-right"
+              v-model:value="form.subType"
+              :options="alarmCondition"
+              :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
+              :placeholder="$t('common.plzSelect')"
+            />
+          </AFormItem>
+          <AFormItem label="设备参数" name="paramCode" v-if="form.subType === '0'">
+            <div @click="parameterSelection">
+              <AFlex justify="space-between" align="center" class="div-style">
+                <div v-if="form.paramCode">
+                  {{ parametersName }}
+                </div>
+                <div class="div-style-text" v-else>请选择</div>
+                <div>
+                  <SvgIcon class="icon-style" name="right" />
+                </div>
+              </AFlex>
+            </div>
+          </AFormItem>
+          <AFormItem label="设备" name="deviceId" v-if="form.subType === '1'">
+            <div @click="equipmentParameterSelection">
+              <AFlex justify="space-between" align="center" class="div-style">
+                <div v-if="form.deviceId">
+                  {{ equipmentName }}
+                </div>
+                <div class="div-style-text" v-else>请选择</div>
+
+                <div>
+                  <SvgIcon class="icon-style" name="right" />
+                </div>
+              </AFlex>
+            </div>
+          </AFormItem>
+          <AFormItem label="运算符" name="alarmAlgOperator" v-if="form.subType === '0'">
+            <ASelect
+              class="select-input select-right"
+              v-model:value="form.alarmAlgOperator"
+              :options="alarmAlgOperator"
+              :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
+              :placeholder="$t('common.plzSelect')"
+            />
+          </AFormItem>
+          <AFormItem label="阈值" name="alarmThreshold" v-if="form.subType === '0'">
+            <AInput v-model:value="form.alarmThreshold" placeholder="请输入" class="select-input" />
+          </AFormItem>
+          <AFormItem label="设备状态" name="alarmDeviceState" v-if="form.subType === '1'">
+            <ASelect
+              class="select-input"
+              v-model:value="form.alarmDeviceState"
+              :options="alarmDeviceState"
+              :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
+              :placeholder="$t('common.plzSelect')"
+            />
+          </AFormItem>
+          <AFormItem label="指定时间点" name="alarmScheduledTime" v-if="form.subType === '2'">
+            <ATimePicker
+              class="select-input select-right"
+              v-model:value="form.alarmScheduledTime"
+              format="HH:mm"
+              value-format="HH:mm"
+              :allow-clear="false"
+            />
+          </AFormItem>
+          <AFormItem label="重复" name="alarmRepeatTime" v-if="form.subType === '2'">
+            <ASelect
+              class="select-input"
+              v-model:value="form.alarmRepeatTime"
+              :options="alarmRepeatTime"
+              :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
+              :placeholder="$t('common.plzSelect')"
+            />
+          </AFormItem>
+        </AFlex>
+      </ABadge>
     </AForm>
+    <DataSelection
+      ref="dataSelection"
+      :select-type="0"
+      :form="{
+        groupId: form.groupId,
+        childGroupId: form.childGroupId,
+        deviceId: form.deviceId,
+        paramCode: form.paramCode,
+      }"
+      @confirmClick="confirmClick"
+    />
+    <DataSelection
+      ref="equipmentSelection"
+      :select-type="1"
+      :form="{
+        groupId: form.groupId,
+        childGroupId: form.childGroupId,
+        deviceId: form.deviceId,
+        paramCode: form.paramCode,
+      }"
+      @confirmClick="confirmClick"
+    />
   </div>
 </template>
 
 <style lang="scss" scoped>
+.div-style-text {
+  color: #d9d9d9;
+}
+
+.icon-style {
+  margin-top: 5px;
+  color: rgb(0 0 0 / 25%);
+}
+
+.div-style {
+  width: 192px;
+  height: 32px;
+  padding: 0 11px;
+  margin-right: 24px;
+  cursor: pointer;
+  background: #fff;
+  border: 1px solid rgb(0 0 0 / 15%);
+  border-radius: 4px;
+}
+
+.div-style:hover {
+  border-color: var(--antd-color-primary-hover);
+}
+
+.icon-delete {
+  top: 32px;
+  right: 16px;
+  font-size: 16px;
+  color: #ccc;
+  cursor: pointer;
+}
+
 .select-input {
   width: 192px;
 }
@@ -88,6 +230,7 @@ const rules: Record<string, Rule[]> = {
 }
 
 .conditions-bgc {
+  width: 872px;
   padding: 16px;
   margin-top: 16px;
   background: #f5f7fa;