feat(views): 添加“实时监测”页面的高级设置操作面板

src/i18n/locales/zh.json

@@ -105,6 +105,8 @@
     "cancel": "取消",
     "cannotEmpty": "不能为空",
     "certain": "确定",
+    "clearValue": "清零",
+    "clearValueComplete": "清零完成",
     "configured": "已配置",
     "confirm": "确认",
     "confirmClose": "确定关闭{name}",
@@ -115,8 +117,10 @@
     "date": "日",
     "delete": "删除",
     "deleteConfirmation": "删除确定",
+    "disable": "禁用",
     "editor": "编辑",
     "emptyData": "请求数据为空",
+    "enable": "启用",
     "entire": "全部",
     "export": "导出",
     "exportImg": "导出图片",
@@ -126,6 +130,8 @@
     "finishSetup": "完成配置",
     "group": "组",
     "item": "项",
+    "keep": "保持",
+    "keepNo": "不保持",
     "maximize": "最大化",
     "month": "月",
     "needHelp": "需要帮助？",
@@ -158,6 +164,8 @@
     "recentlyThirtyDays": "最近30天",
     "requestTimedOut": "请求超时",
     "reset": "重置",
+    "resetFlag": "复位",
+    "resetFlagComplete": "复位完成",
     "return": "返回",
     "returnFirstUse": "返回到首次使用页？",
     "revise": "修改",
@@ -171,6 +179,9 @@
     "serialNumber": "序号",
     "settings": "设置",
     "shutDown": "停机",
+    "shutDownNo": "不停机",
+    "silencing": "消音",
+    "silencingComplete": "消音完成",
     "skip": "跳过",
     "skipConfirm": "跳过确认",
     "skipStepConfirm": "是否跳过{name}，",
@@ -505,10 +516,65 @@
   },
   "organizationManage": {},
   "realTimeMonitor": {
+    "addSubtractLoadParameters": "加减载参数",
     "addTimePeriod": "新增时间段",
     "aiOptimization": "AI智能寻优",
     "aiStartStop": "AI智能启停",
     "confirmSwitchToMode": "确定切换至{mode}",
+    "devParams": {
+      "addMachineDelay1": "加机延时1(min)",
+      "addMachineDelay2": "加机延时2(min)",
+      "addMachineLoadRate": "加机负载率(%)",
+      "addMachineTempDifference": "加机温差(℃)",
+      "addTowerDelay": "加塔延时(min)",
+      "addTowerFrequency": "加塔频率(Hz)",
+      "addTowerTempDifference": "加塔温差(℃)",
+      "autoAddSubtractMachine": "自动加减机",
+      "autoAddSubtractTower": "自动加减塔",
+      "butterflyValveAlarmMask": "蝶阀开关报警屏蔽",
+      "butterflyValveFullStrokeTime": "蝶阀全行程时间(S)",
+      "chilledMainOutPressureBias": "冷冻总管出水压力偏差设定(bar)",
+      "chilledMainOutTempBias": "冷冻总管出水温度偏差设定(℃)",
+      "chilledMainReturnPressureBias": "冷冻总管回水压力偏差设定(bar)",
+      "chilledMainReturnTempBias": "冷冻总管回水温度偏差设定(℃)",
+      "chilledPumpFrequencyLower": "冷冻泵频率下限设定(Hz)",
+      "chilledPumpFrequencyUpper": "冷冻泵频率上限设定(Hz)",
+      "chilledPumpMinNumber": "冷冻泵最少开启台数设定(台)",
+      "chilledPumpShutdownDelay": "冷冻泵停机延时(min)",
+      "coolingMachineOutWaterTemp": "冷机出水温度(℃)",
+      "coolingMainOutTempBias": "冷却总管出水温度偏差设定(℃)",
+      "coolingMainReturnTempBias": "冷却总管回水温度偏差设定(℃)",
+      "coolingTowerFrequencyLower": "冷却塔频率下限设定(Hz)",
+      "coolingTowerFrequencyUpper": "冷却塔频率上限设定(Hz)",
+      "coolingTowerLoadJudgmentDelay": "冷却塔加减载判断延时(min)",
+      "faultAutoReset": "故障自动复位",
+      "faultReset": "故障复位",
+      "faultSound": "故障消声",
+      "frequencyAdjust": "频率调节",
+      "hostFaultShutdown": "主机故障是否停机",
+      "hostLoadJudgmentDelay": "主机加减载判断延时(min)",
+      "hostMaxRunningNumber": "主机最大运行数量设定",
+      "hostParams": "主机参数",
+      "hostValveCloseDelay": "主机阀关后延时关泵(S)",
+      "initialHostNumber": "初始开主机数量设定",
+      "initialMultiHostInterval": "初始开多台主机间隔设定",
+      "powerOffKeep": "断电保持",
+      "pumpTimingRotation": "水泵定时轮换时间设定(时)",
+      "pumpTowerParams": "泵塔参数",
+      "reduceMachineDelay": "减机延时(min)",
+      "reduceMachineLoadRate": "减机负载率(%)",
+      "reduceMachineTempDifference": "减机温差(℃)",
+      "reduceTowerDelay": "减塔延时(min)",
+      "reduceTowerFrequency": "减塔频率(Hz)",
+      "reduceTowerTempDifference": "减塔温差(℃)",
+      "sensorBias": "传感器偏置",
+      "startFaultDelay": "启动故障延时(S)",
+      "systemParams": "系统参数",
+      "timeClear": "时间清零",
+      "timingPumpChangeDelay": "定时换泵延时关时间设定(分)",
+      "towerOutWaterTemp": "塔出水温度(℃)",
+      "waterPumpSwitchDelay": "水泵切换延时(秒)"
+    },
     "deviceName": "设备名称",
     "deviceStatus": "设备状态",
     "fullAutoConfirmTip": "系统一键投入，全程自动加减载",
@@ -520,6 +586,7 @@
     "isInAlgorithm": "是否加入算法",
     "jogMode": "点动模式",
     "optimizationAlgorithm": "寻优算法",
+    "otherParameters": "其他参数",
     "outletTemperature": "出水温度",
     "setValue": "设定值",
     "settingParticipatingDevices": "请设置参与算法的设备",

src/views/real-time-monitor/device-control/AIOptimization.vue

@@ -108,7 +108,7 @@ const handleOk = () => {
 </script>
 
 <template>
-  <div>
+  <div class="ai-optimize-container">
     <ATable class="ai-optimize-table" :columns="columns" :data-source="dataSource" :pagination="false">
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'algorithm'">
@@ -156,6 +156,10 @@ const handleOk = () => {
 </style>
 
 <style lang="scss" scoped>
+.ai-optimize-container {
+  padding-inline: 24px;
+}
+
 :deep(.ai-optimize-table).ant-table-wrapper .ant-table {
   color: rgba(255 255 255 / 85%);
   background: transparent;

src/views/real-time-monitor/device-control/AIStartStop.vue

@@ -78,11 +78,21 @@ const deviceList = ref<DeviceItem[]>([
   { name: '五期-2#冷水主机', status: 'on' },
   { name: '五期-3#冷水主机', status: 'off' },
   { name: '五期-3#冷水主机', status: 'off' },
+  { name: '五期-3#冷水主机', status: 'off' },
+  { name: '五期-3#冷水主机', status: 'off' },
+  { name: '五期-3#冷水主机', status: 'off' },
+  { name: '五期-3#冷水主机', status: 'off' },
+  { name: '五期-3#冷水主机', status: 'off' },
+  { name: '五期-3#冷水主机', status: 'off' },
+  { name: '五期-3#冷水主机', status: 'off' },
+  { name: '五期-3#冷水主机', status: 'off' },
+  { name: '五期-3#冷水主机', status: 'off' },
+  { name: '五期-3#冷水主机', status: 'off' },
 ]);
 </script>
 
 <template>
-  <div class="ai-start-stop-container">
+  <div class="ctrl-panel-scroll-container ai-start-stop-container">
     <ASegmented :value="currentModeType" :options="modeTypes">
       <template #label="option">
         <span @click="handleModeClick(option as ModeTypeItem)">{{ option.payload.title }}</span>
@@ -97,7 +107,7 @@ const deviceList = ref<DeviceItem[]>([
         <div class="power-button-segmented-border"></div>
       </div>
     </template>
-    <template v-else-if="currentModeType === 'halfAuto'">
+    <div v-else-if="currentModeType === 'halfAuto'" class="ctrl-panel-scroll-content">
       <div v-for="(item, index) in deviceList" :key="index" class="device-item">
         <div>
           <span :class="['device-item-tag', { 'device-tag-run': item.status === 'on' }]">
@@ -113,59 +123,11 @@ const deviceList = ref<DeviceItem[]>([
           :un-checked-children="$t('common.off')"
         />
       </div>
-    </template>
+    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-:deep(.ant-segmented) {
-  padding: 4px;
-  margin-bottom: 16px;
-  color: #fff;
-  background-color: rgb(255 255 255 / 8%);
-  border-radius: 4px;
-
-  .ant-segmented-group > div {
-    background-color: var(--antd-color-primary);
-  }
-
-  .ant-segmented-item-label {
-    display: flex;
-    align-items: center;
-    padding-inline: 0;
-
-    span {
-      padding-inline: 12px;
-    }
-  }
-
-  .ant-segmented-item-selected {
-    color: #fff;
-    background-color: var(--antd-color-primary);
-    box-shadow: none;
-  }
-
-  .ant-segmented-item {
-    + .ant-segmented-item {
-      margin-left: 8px;
-    }
-
-    &:hover:not(.ant-segmented-item-selected, .ant-segmented-item-disabled) {
-      color: #fff;
-
-      &::after {
-        background-color: var(--antd-color-primary-opacity-15);
-      }
-    }
-  }
-
-  .ant-segmented-item-disabled,
-  .ant-segmented-item-disabled:hover,
-  .ant-segmented-item-disabled:focus {
-    color: rgb(255 255 255 / 25%);
-  }
-}
-
 .power-button {
   display: flex;
   align-items: center;

src/views/real-time-monitor/device-control/AdvancedSettings.vue

@@ -1,10 +1,531 @@
 <script setup lang="ts">
-// 这里可以添加高级设置的逻辑
+import { computed, reactive, ref } from 'vue';
+
+import { t } from '@/i18n';
+
+import type { SegmentedBaseOption } from 'ant-design-vue/es/segmented/src/segmented';
+import type { FormRules } from '@/types';
+
+type ParamValue = 'addSubtractLoad' | 'other';
+
+interface ParamTypeItem extends SegmentedBaseOption {
+  value: ParamValue;
+  payload: {
+    title: string;
+  };
+}
+
+const modeTypes = computed<ParamTypeItem[]>(() => {
+  return [
+    {
+      value: 'addSubtractLoad',
+      payload: {
+        title: t('realTimeMonitor.addSubtractLoadParameters'),
+      },
+    },
+    {
+      value: 'other',
+      payload: {
+        title: t('realTimeMonitor.otherParameters'),
+      },
+    },
+  ];
+});
+
+const currentParamType = ref<ParamValue>('addSubtractLoad');
+
+interface DevParamsForm {
+  coolingMachineOutWaterTemp?: number;
+  addMachineTempDifference?: number;
+  reduceMachineTempDifference?: number;
+  addMachineLoadRate?: number;
+  reduceMachineLoadRate?: number;
+  addMachineDelay1?: number;
+  reduceMachineDelay?: number;
+  addMachineDelay2?: number;
+  towerOutWaterTemp?: number;
+  addTowerTempDifference?: number;
+  reduceTowerTempDifference?: number;
+  addTowerFrequency?: number;
+  reduceTowerFrequency?: number;
+  addTowerDelay?: number;
+  reduceTowerDelay?: number;
+  coolingTowerFrequencyUpper?: number;
+  coolingTowerFrequencyLower?: number;
+  chilledPumpFrequencyLower?: number;
+  chilledPumpFrequencyUpper?: number;
+  hostFaultShutdown?: string;
+  hostLoadJudgmentDelay?: number;
+  hostMaxRunningNumber?: number;
+  initialHostNumber?: number;
+  initialMultiHostInterval?: number;
+  chilledPumpShutdownDelay?: number;
+  coolingTowerLoadJudgmentDelay?: number;
+  waterPumpSwitchDelay?: number;
+  chilledPumpMinNumber?: number;
+  timingPumpChangeDelay?: number;
+  pumpTimingRotation?: number;
+  faultSound?: string;
+  butterflyValveFullStrokeTime?: number;
+  powerOffKeep?: string;
+  hostValveCloseDelay?: number;
+  startFaultDelay?: number;
+  faultAutoReset?: string;
+  faultReset?: string;
+  timeClear?: string;
+  butterflyValveAlarmMask?: number;
+  chilledMainOutTempBias?: number;
+  chilledMainReturnPressureBias?: number;
+  chilledMainOutPressureBias?: number;
+  coolingMainOutTempBias?: number;
+  coolingMainReturnTempBias?: number;
+  chilledMainReturnTempBias?: number;
+}
+
+const devParamsForm = reactive<DevParamsForm>({
+  coolingMachineOutWaterTemp: undefined,
+  addMachineTempDifference: undefined,
+  reduceMachineTempDifference: undefined,
+  addMachineLoadRate: undefined,
+  reduceMachineLoadRate: undefined,
+  addMachineDelay1: undefined,
+  reduceMachineDelay: undefined,
+  addMachineDelay2: undefined,
+  towerOutWaterTemp: undefined,
+  addTowerTempDifference: undefined,
+  reduceTowerTempDifference: undefined,
+  addTowerFrequency: undefined,
+  reduceTowerFrequency: undefined,
+  addTowerDelay: undefined,
+  reduceTowerDelay: undefined,
+  coolingTowerFrequencyUpper: undefined,
+  coolingTowerFrequencyLower: undefined,
+  chilledPumpFrequencyLower: undefined,
+  chilledPumpFrequencyUpper: undefined,
+  hostFaultShutdown: undefined,
+  hostLoadJudgmentDelay: undefined,
+  hostMaxRunningNumber: undefined,
+  initialHostNumber: undefined,
+  initialMultiHostInterval: undefined,
+  chilledPumpShutdownDelay: undefined,
+  coolingTowerLoadJudgmentDelay: undefined,
+  waterPumpSwitchDelay: undefined,
+  chilledPumpMinNumber: undefined,
+  timingPumpChangeDelay: undefined,
+  pumpTimingRotation: undefined,
+  faultSound: undefined,
+  butterflyValveFullStrokeTime: undefined,
+  powerOffKeep: undefined,
+  hostValveCloseDelay: undefined,
+  startFaultDelay: undefined,
+  faultAutoReset: undefined,
+  faultReset: undefined,
+  timeClear: undefined,
+  butterflyValveAlarmMask: undefined,
+  chilledMainOutTempBias: undefined,
+  chilledMainReturnPressureBias: undefined,
+  chilledMainOutPressureBias: undefined,
+  coolingMainOutTempBias: undefined,
+  coolingMainReturnTempBias: undefined,
+  chilledMainReturnTempBias: undefined,
+});
+
+const rules = computed<FormRules<DevParamsForm>>(() => {
+  return {};
+});
 </script>
 
 <template>
-  <div>
-    <h2>Advanced Settings</h2>
-    <!-- 这里可以添加高级设置的具体内容 -->
+  <div class="ctrl-panel-scroll-container">
+    <ASegmented v-model:value="currentParamType" :options="modeTypes">
+      <template #label="{ payload }">
+        <span>{{ payload.title }}</span>
+      </template>
+    </ASegmented>
+    <AForm class="ctrl-panel-scroll-content" ref="formRef" :model="devParamsForm" :rules="rules" layout="vertical">
+      <template v-if="currentParamType === 'addSubtractLoad'">
+        <h4>{{ $t('realTimeMonitor.devParams.autoAddSubtractMachine') }}</h4>
+        <ARow :gutter="32">
+          <ACol span="12">
+            <AFormItem
+              :label="$t('realTimeMonitor.devParams.coolingMachineOutWaterTemp')"
+              name="coolingMachineOutWaterTemp"
+            >
+              <AInputNumber v-model:value="devParamsForm.coolingMachineOutWaterTemp" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem
+              :label="$t('realTimeMonitor.devParams.addMachineTempDifference')"
+              name="addMachineTempDifference"
+            >
+              <AInputNumber v-model:value="devParamsForm.addMachineTempDifference" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem
+              :label="$t('realTimeMonitor.devParams.reduceMachineTempDifference')"
+              name="reduceMachineTempDifference"
+            >
+              <AInputNumber v-model:value="devParamsForm.reduceMachineTempDifference" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.addMachineLoadRate')" name="addMachineLoadRate">
+              <AInputNumber v-model:value="devParamsForm.addMachineLoadRate" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.reduceMachineLoadRate')" name="reduceMachineLoadRate">
+              <AInputNumber v-model:value="devParamsForm.reduceMachineLoadRate" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.addMachineDelay1')" name="addMachineDelay1">
+              <AInputNumber v-model:value="devParamsForm.addMachineDelay1" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.reduceMachineDelay')" name="reduceMachineDelay">
+              <AInputNumber v-model:value="devParamsForm.reduceMachineDelay" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.addMachineDelay2')" name="addMachineDelay2">
+              <AInputNumber v-model:value="devParamsForm.addMachineDelay2" :controls="false" />
+            </AFormItem>
+          </ACol>
+        </ARow>
+        <h4>{{ $t('realTimeMonitor.devParams.autoAddSubtractTower') }}</h4>
+        <ARow :gutter="32">
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.towerOutWaterTemp')" name="towerOutWaterTemp">
+              <AInputNumber v-model:value="devParamsForm.towerOutWaterTemp" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.addTowerTempDifference')" name="addTowerTempDifference">
+              <AInputNumber v-model:value="devParamsForm.addTowerTempDifference" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem
+              :label="$t('realTimeMonitor.devParams.reduceTowerTempDifference')"
+              name="reduceTowerTempDifference"
+            >
+              <AInputNumber v-model:value="devParamsForm.reduceTowerTempDifference" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.addTowerFrequency')" name="addTowerFrequency">
+              <AInputNumber v-model:value="devParamsForm.addTowerFrequency" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.reduceTowerFrequency')" name="reduceTowerFrequency">
+              <AInputNumber v-model:value="devParamsForm.reduceTowerFrequency" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.addTowerDelay')" name="addTowerDelay">
+              <AInputNumber v-model:value="devParamsForm.addTowerDelay" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.reduceTowerDelay')" name="reduceTowerDelay">
+              <AInputNumber v-model:value="devParamsForm.reduceTowerDelay" :controls="false" />
+            </AFormItem>
+          </ACol>
+        </ARow>
+      </template>
+      <template v-else-if="currentParamType === 'other'">
+        <h4>{{ $t('realTimeMonitor.devParams.frequencyAdjust') }}</h4>
+        <ARow :gutter="32">
+          <ACol span="12">
+            <AFormItem
+              :label="$t('realTimeMonitor.devParams.coolingTowerFrequencyUpper')"
+              name="coolingTowerFrequencyUpper"
+            >
+              <AInputNumber v-model:value="devParamsForm.coolingTowerFrequencyUpper" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem
+              :label="$t('realTimeMonitor.devParams.coolingTowerFrequencyLower')"
+              name="coolingTowerFrequencyLower"
+            >
+              <AInputNumber v-model:value="devParamsForm.coolingTowerFrequencyLower" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem
+              :label="$t('realTimeMonitor.devParams.chilledPumpFrequencyLower')"
+              name="chilledPumpFrequencyLower"
+            >
+              <AInputNumber v-model:value="devParamsForm.chilledPumpFrequencyLower" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem
+              :label="$t('realTimeMonitor.devParams.chilledPumpFrequencyUpper')"
+              name="chilledPumpFrequencyUpper"
+            >
+              <AInputNumber v-model:value="devParamsForm.chilledPumpFrequencyUpper" :controls="false" />
+            </AFormItem>
+          </ACol>
+        </ARow>
+        <h4>{{ $t('realTimeMonitor.devParams.hostParams') }}</h4>
+        <ARow :gutter="32">
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.hostFaultShutdown')" name="hostFaultShutdown">
+              <ASelect v-model:value="devParamsForm.hostFaultShutdown" popup-class-name="ai-advanced-select-popup">
+                <ASelectOption value="0">{{ $t('common.shutDownNo') }}</ASelectOption>
+                <ASelectOption value="1">{{ $t('common.shutDown') }}</ASelectOption>
+              </ASelect>
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.hostLoadJudgmentDelay')" name="hostLoadJudgmentDelay">
+              <AInputNumber v-model:value="devParamsForm.hostLoadJudgmentDelay" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.hostMaxRunningNumber')" name="hostMaxRunningNumber">
+              <AInputNumber v-model:value="devParamsForm.hostMaxRunningNumber" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.initialHostNumber')" name="initialHostNumber">
+              <AInputNumber v-model:value="devParamsForm.initialHostNumber" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem
+              :label="$t('realTimeMonitor.devParams.initialMultiHostInterval')"
+              name="initialMultiHostInterval"
+            >
+              <AInputNumber v-model:value="devParamsForm.initialMultiHostInterval" :controls="false" />
+            </AFormItem>
+          </ACol>
+        </ARow>
+        <h4>{{ $t('realTimeMonitor.devParams.pumpTowerParams') }}</h4>
+        <ARow :gutter="32">
+          <ACol span="12">
+            <AFormItem
+              :label="$t('realTimeMonitor.devParams.chilledPumpShutdownDelay')"
+              name="chilledPumpShutdownDelay"
+            >
+              <AInputNumber v-model:value="devParamsForm.chilledPumpShutdownDelay" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem
+              :label="$t('realTimeMonitor.devParams.coolingTowerLoadJudgmentDelay')"
+              name="coolingTowerLoadJudgmentDelay"
+            >
+              <AInputNumber v-model:value="devParamsForm.coolingTowerLoadJudgmentDelay" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.waterPumpSwitchDelay')" name="waterPumpSwitchDelay">
+              <AInputNumber v-model:value="devParamsForm.waterPumpSwitchDelay" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.chilledPumpMinNumber')" name="chilledPumpMinNumber">
+              <AInputNumber v-model:value="devParamsForm.chilledPumpMinNumber" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.timingPumpChangeDelay')" name="timingPumpChangeDelay">
+              <AInputNumber v-model:value="devParamsForm.timingPumpChangeDelay" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.pumpTimingRotation')" name="pumpTimingRotation">
+              <AInputNumber v-model:value="devParamsForm.pumpTimingRotation" :controls="false" />
+            </AFormItem>
+          </ACol>
+        </ARow>
+        <h4>{{ $t('realTimeMonitor.devParams.systemParams') }}</h4>
+        <ARow :gutter="32">
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.faultSound')" name="faultSound">
+              <ASelect v-model:value="devParamsForm.faultSound" popup-class-name="ai-advanced-select-popup">
+                <ASelectOption value="0">{{ $t('common.silencingComplete') }}</ASelectOption>
+                <ASelectOption value="1">{{ $t('common.silencing') }}</ASelectOption>
+              </ASelect>
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem
+              :label="$t('realTimeMonitor.devParams.butterflyValveFullStrokeTime')"
+              name="butterflyValveFullStrokeTime"
+            >
+              <AInputNumber v-model:value="devParamsForm.butterflyValveFullStrokeTime" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.powerOffKeep')" name="powerOffKeep">
+              <ASelect v-model:value="devParamsForm.powerOffKeep" popup-class-name="ai-advanced-select-popup">
+                <ASelectOption value="0">{{ $t('common.keepNo') }}</ASelectOption>
+                <ASelectOption value="1">{{ $t('common.keep') }}</ASelectOption>
+              </ASelect>
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.hostValveCloseDelay')" name="hostValveCloseDelay">
+              <AInputNumber v-model:value="devParamsForm.hostValveCloseDelay" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.startFaultDelay')" name="startFaultDelay">
+              <AInputNumber v-model:value="devParamsForm.startFaultDelay" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.faultAutoReset')" name="faultAutoReset">
+              <ASelect v-model:value="devParamsForm.faultAutoReset" popup-class-name="ai-advanced-select-popup">
+                <ASelectOption value="0">{{ $t('common.disable') }}</ASelectOption>
+                <ASelectOption value="1">{{ $t('common.enable') }}</ASelectOption>
+              </ASelect>
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.faultReset')" name="faultReset">
+              <ASelect v-model:value="devParamsForm.faultReset" popup-class-name="ai-advanced-select-popup">
+                <ASelectOption value="0">{{ $t('common.resetFlagComplete') }}</ASelectOption>
+                <ASelectOption value="1">{{ $t('common.resetFlag') }}</ASelectOption>
+              </ASelect>
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.timeClear')" name="timeClear">
+              <ASelect v-model:value="devParamsForm.timeClear" popup-class-name="ai-advanced-select-popup">
+                <ASelectOption value="0">{{ $t('common.clearValueComplete') }}</ASelectOption>
+                <ASelectOption value="1">{{ $t('common.clearValue') }}</ASelectOption>
+              </ASelect>
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.butterflyValveAlarmMask')" name="butterflyValveAlarmMask">
+              <AInputNumber v-model:value="devParamsForm.butterflyValveAlarmMask" :controls="false" />
+            </AFormItem>
+          </ACol>
+        </ARow>
+        <h4>{{ $t('realTimeMonitor.devParams.sensorBias') }}</h4>
+        <ARow :gutter="32">
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.chilledMainOutTempBias')" name="chilledMainOutTempBias">
+              <AInputNumber v-model:value="devParamsForm.chilledMainOutTempBias" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem
+              :label="$t('realTimeMonitor.devParams.chilledMainReturnPressureBias')"
+              name="chilledMainReturnPressureBias"
+            >
+              <AInputNumber v-model:value="devParamsForm.chilledMainReturnPressureBias" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem
+              :label="$t('realTimeMonitor.devParams.chilledMainOutPressureBias')"
+              name="chilledMainOutPressureBias"
+            >
+              <AInputNumber v-model:value="devParamsForm.chilledMainOutPressureBias" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem :label="$t('realTimeMonitor.devParams.coolingMainOutTempBias')" name="coolingMainOutTempBias">
+              <AInputNumber v-model:value="devParamsForm.coolingMainOutTempBias" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem
+              :label="$t('realTimeMonitor.devParams.coolingMainReturnTempBias')"
+              name="coolingMainReturnTempBias"
+            >
+              <AInputNumber v-model:value="devParamsForm.coolingMainReturnTempBias" :controls="false" />
+            </AFormItem>
+          </ACol>
+          <ACol span="12">
+            <AFormItem
+              :label="$t('realTimeMonitor.devParams.chilledMainReturnTempBias')"
+              name="chilledMainReturnTempBias"
+            >
+              <AInputNumber v-model:value="devParamsForm.chilledMainReturnTempBias" :controls="false" />
+            </AFormItem>
+          </ACol>
+        </ARow>
+      </template>
+    </AForm>
   </div>
 </template>
+
+<style lang="scss">
+.ai-advanced-select-popup {
+  background-color: rgb(44 54 70);
+
+  .ant-select-item {
+    color: #fff;
+
+    &:hover {
+      background-color: rgb(255 255 255 / 20%);
+    }
+  }
+
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+    color: #fff;
+    background-color: rgb(255 255 255 / 20%);
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+:deep(.ant-form) {
+  h4 {
+    margin-bottom: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+    color: #fff;
+  }
+
+  .ant-form-item .ant-form-item-label > label {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgb(255 255 255 / 65%);
+  }
+
+  .ant-input-number {
+    width: 100%;
+    color: #fff;
+    background: rgb(30 37 48 / 32%);
+    border-color: rgb(255 255 255 / 24%);
+    border-radius: 4px;
+
+    &:hover,
+    &:focus,
+    &.ant-input-number-focused {
+      border-color: var(--antd-color-primary-hover);
+    }
+
+    .ant-input-number-input {
+      color: #fff;
+    }
+  }
+
+  .ant-select {
+    .ant-select-selector {
+      color: #fff;
+      background-color: rgb(30 37 48 / 32%);
+      border-color: rgb(255 255 255 / 24%);
+    }
+
+    .ant-select-arrow {
+      color: #8c94a8;
+    }
+  }
+}
+</style>

src/views/real-time-monitor/device-control/DeviceControl.vue

@@ -116,7 +116,7 @@ defineExpose({
   right: 48px;
   width: 464px;
   height: 630px;
-  padding: 24px;
+  padding-block: 24px;
   background: rgb(30 37 48 / 50%);
   backdrop-filter: blur(12px);
   border: 1px solid rgb(255 255 255 / 24%);
@@ -125,12 +125,89 @@ defineExpose({
 
 .ctrl-panel-title {
   margin-bottom: 16px;
+  margin-left: 24px;
   font-size: 16px;
   font-weight: 500;
   line-height: 22px;
   color: #fff;
 }
 
+.ctrl-panel-scroll-container {
+  height: calc(100% - 38px);
+  padding-left: 24px;
+  overflow: hidden;
+}
+
+:deep(.ctrl-panel-scroll-content) {
+  height: calc(100% - 52px);
+  padding-right: 20px;
+  margin-right: 4px;
+  overflow: hidden auto;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    cursor: pointer;
+    background: #55585e;
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-corner {
+    display: none;
+  }
+}
+
+:deep(.ant-segmented) {
+  padding: 4px;
+  margin-bottom: 16px;
+  color: #fff;
+  background-color: rgb(255 255 255 / 8%);
+  border-radius: 4px;
+
+  .ant-segmented-group > div {
+    background-color: var(--antd-color-primary);
+  }
+
+  .ant-segmented-item-label {
+    display: flex;
+    align-items: center;
+    padding-inline: 0;
+
+    span {
+      padding-inline: 12px;
+    }
+  }
+
+  .ant-segmented-item-selected {
+    color: #fff;
+    background-color: var(--antd-color-primary);
+    box-shadow: none;
+  }
+
+  .ant-segmented-item {
+    + .ant-segmented-item {
+      margin-left: 8px;
+    }
+
+    &:hover:not(.ant-segmented-item-selected, .ant-segmented-item-disabled) {
+      color: #fff;
+
+      &::after {
+        background-color: var(--antd-color-primary-opacity-15);
+      }
+    }
+  }
+
+  .ant-segmented-item-disabled,
+  .ant-segmented-item-disabled:hover,
+  .ant-segmented-item-disabled:focus {
+    color: rgb(255 255 255 / 25%);
+  }
+}
+
 :deep(.ant-switch) {
   background: rgb(255 255 255 / 25%);