perf(views): 编写"算法管理"模块设备控制组件

src/views/algorithm-manage/EquipmentControl.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { t } from '@/i18n';
+
+import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+import type { ChillersItem, DictValue } from '@/types';
+
+interface Props {
+  form: ChillersItem;
+  algWtTempCtrlMode: DictValue[];
+  algAlways: DictValue[];
+  algWtTempSetStep: DictValue[];
+}
+const formRef = ref<FormInstance>();
+const rules: Record<string, Rule[]> = {
+  waterTempControlMode: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  continuous: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  stopCompensate: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  restartCompensate: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  safeDiffPressureLower: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  safeLoadLower: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+  waterTempStep: [{ required: true, message: t('common.cannotEmpty'), trigger: 'change' }],
+};
+defineProps<Props>();
+const formResetFields = () => {
+  formRef.value?.resetFields();
+};
+const formRefSubmit = () => {
+  return formRef.value?.validate() || Promise.resolve();
+};
+
+defineExpose({
+  formRefSubmit,
+  formResetFields,
+});
+</script>
+
+<template>
+  <div>
+    <AForm ref="formRef" class="algorithm-form" :model="form" label-align="left" layout="vertical" :rules="rules">
+      <AFlex class="flex-bottom" wrap="wrap" :gap="38">
+        <AFormItem label="水温控制模式" name="waterTempControlMode">
+          <ASelect
+            class="select-width"
+            v-model:value="form.waterTempControlMode"
+            :options="algWtTempCtrlMode"
+            :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
+            :placeholder="$t('common.plzSelect')"
+          />
+        </AFormItem>
+        <AFormItem label="是否需要连续运行" name="continuous">
+          <ASelect
+            class="select-width"
+            v-model:value="form.continuous"
+            :options="algAlways"
+            :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
+            :placeholder="$t('common.plzSelect')"
+          />
+        </AFormItem>
+        <AFormItem label="停机补偿值" name="stopCompensate">
+          <AInputNumber class="select-width" v-model:value="form.stopCompensate" addon-after="℃" />
+        </AFormItem>
+        <AFormItem label="再启补偿值" name="restartCompensate">
+          <AInputNumber class="select-width" v-model:value="form.restartCompensate" addon-after="℃" />
+        </AFormItem>
+        <AFormItem label="安全压差下限" name="safeDiffPressureLower">
+          <AInputNumber class="select-width" v-model:value="form.safeDiffPressureLower" addon-after="kpa" />
+        </AFormItem>
+        <AFormItem label="安全负载下限" name="safeLoadLower">
+          <AInputNumber class="select-width" v-model:value="form.safeLoadLower" addon-after="kpa" />
+        </AFormItem>
+        <AFormItem label="水温设定步长（℃）" name="continuous">
+          <ASelect
+            class="select-width"
+            v-model:value="form.waterTempStep"
+            :options="algWtTempSetStep"
+            :field-names="{ label: 'dictValue', value: 'dictEngValue' }"
+            :placeholder="$t('common.plzSelect')"
+          />
+        </AFormItem>
+      </AFlex>
+    </AForm>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.algorithm-form :deep(.ant-form-item-label > label) {
+  color: #666;
+}
+
+.flex-bottom {
+  row-gap: 0 !important;
+}
+
+.select-width {
+  width: 192px;
+}
+</style>