feat(web): 添加输入框前后缀支持并优化设备参数下发功能

- 在 `monitor.vue` 中新增预制舱参数设置弹窗，支持参数配置与下发功能
- 增加表单校验规则及数据初始化逻辑，确保参数下发前的数据合法性

web/src/components/DetailInfo.vue

@@ -68,6 +68,8 @@
                   :type="item.inputType"
                   :placeholder="'请输入' + item.label"
                   :disabled="!props.disabled && type ? !!item.disabled : props.disabled"
+                  :addon-before="item.addonBefore"
+                  :addon-after="item.addonAfter"
                 />
 
                 <a-input-number
@@ -78,6 +80,7 @@
                   :max="item.max || 10000000"
                   :formatter="item.formatter || null"
                   :addon-before="item.addonBefore"
+                  :addon-after="item.addonAfter"
                   :disabled="props.disabled"
                 />
 
@@ -535,8 +538,6 @@ function avatarUploadChange(info) {
 function onFieldsChange() {}
 function handleSubmit() {}
 
-
-
 // 主动暴露方法
 defineExpose({
   confirm,

web/src/components/monitor/device.vue

@@ -369,6 +369,7 @@ export default {
         })
 
         this.deviceList = res.data
+        
         this.$emit('updateGatewayData', res.gateway);
       } catch (error) {
         this.deviceList = []

web/src/views/monitor.vue

@@ -9,7 +9,9 @@
               >{{ station.name }}
             </a-select-option>
           </a-select>
-          <a-button type="primary" @click="handleMessage" style="margin-left: 20px">查看预制舱参数</a-button>
+          <a-button type="primary" @click="handleMessage" style="margin-left: 20px"
+            >查看预制舱参数</a-button
+          >
         </div>
       </div>
       <div class="right">
@@ -22,7 +24,7 @@
           </a-select>
         </div>
         <div class="search-item">
-          <a-button type="primary" @click="handleDispatch">下发</a-button>
+          <a-button type="primary" @click="openDispatchModal">下发</a-button>
         </div>
       </div>
     </div>
@@ -42,8 +44,17 @@
         </div>
       </div>
       <div class="container">
-        <videos v-if="systemType == 4" :station-id="selectStationId" @updateGatewayData="updateGatewayData" />
+        <videos
-        <device v-else :station-id="selectStationId" :system-type="systemType" @updateGatewayData="updateGatewayData" />
+          v-if="systemType == 4"
+          :station-id="selectStationId"
+          @updateGatewayData="updateGatewayData"
+        />
+        <device
+          v-else
+          :station-id="selectStationId"
+          :system-type="systemType"
+          @updateGatewayData="updateGatewayData"
+        />
       </div>
     </div>
     <a-modal
@@ -55,6 +66,25 @@
     >
       <div style="color: #fff; padding: 20px" v-html="message"></div>
     </a-modal>
+    <a-modal
+      v-model:open="dispatchModal"
+      width="900px"
+      style="top: 80px"
+      :footer="null"
+      :destroy-on-close="true"
+    >
+      <DetailInfo
+        :items="detailInfo"
+        :rule-form="ruleForm"
+        :form-rules="formRules"
+        ref="detailInfo"
+      >
+      </DetailInfo>
+      <div style="display: flex; justify-content: center; gap: 20px">
+        <a-button @click="handleback">取消</a-button>
+        <a-button @click="handleConfirm" type="primary" >确认下发</a-button>
+      </div>
+    </a-modal>
   </div>
 </template>
 
@@ -72,6 +102,7 @@ export default {
   data() {
     return {
       // currentKey: '储能系统',
+      dispatchModal: false,
       systemType: 1,
       value: [],
       stations: [],
@@ -84,7 +115,7 @@ export default {
           titles: [
             { v: '运行模式', key: 'workmode' },
             { v: '储能EMU状态', key: 'emu' },
-            { v: '充电桩状态', key: 'cdz' },
+            { v: '充电桩状态', key: 'cdz' }
             //{ v: '总有功功率(台区)', key: 'power', sufix: 'kW' }
           ],
           power: 60,
@@ -153,13 +184,194 @@ export default {
           label: '自定时段'
         }
       ],
-      deviceGroup: []
+      deviceGroup: [],
+      detailInfo: {
+        title: '预制舱参数设置',
+        icon: 'icon-xinxi',
+        list: [
+          {
+            label: '储能放电下限值(0-99)',
+            value: '',
+            key: 'soc_min',
+            type: 'input',
+            addonAfter: '%',
+            inputType:'number'
+          },
+          {
+            label: '储能充电上限值(1-100)',
+            value: '',
+            key: 'soc_max',
+            type: 'input',
+            addonAfter: '%',
+            inputType:'number'
+          },
+          {
+            label: '台区变压器容量(160-1600)',
+            value: undefined,
+            key: 'capacity',
+            type: 'input',
+            addonAfter: 'kVA',
+            inputType:'number'
+          },
+          {
+            label: '安全输入功率(0-400)',
+            value: '',
+            key: 'power_safe',
+            type: 'input',
+            addonAfter: 'kW',
+            inputType:'number'
+          },
+          {
+            label: '储能最大放电功率(0-150)',
+            value: '',
+            key: 'power_discharge',
+            type: 'input',
+            addonAfter: 'kW',
+            inputType:'number'
+          },
+          {
+            label: '储能最大充电功率(0-150)',
+            value: '',
+            key: 'power_charge',
+            type: 'input',
+            addonAfter: 'kW',
+            inputType:'number'
+          },
+          {
+            label: '防逆流回差(10-300)',
+            value: '',
+            key: 'backflow',
+            type: 'input',
+            addonAfter: 'kW',
+            inputType:'number'
+          },
+          {
+            label: '防过载回差(10-300)',
+            value: '',
+            key: 'overload',
+            type: 'input',
+            addonAfter: 'kW',
+            inputType:'number'
+          }
+        ],
+        ruleForm: {}
+      },
+      formRules: {
+        soc_min: [
+          {
+            trigger: 'blur',
+            required: true,
+            message: '请输入储能放电下限值'
+          },
+          { pattern: /^([0-9]|[1-9][0-9])$/, message: '请输入0-99 的整数' }
+        ],
+        soc_max: [
+          {
+            trigger: 'blur',
+            required: true,
+            message: '请输入储能充电上限值'
+          },
+          { pattern: /^(100|[1-9][0-9]?)$/, message: '请输入1-100的整数', trigger: 'blur' }
+        ],
+        capacity: [
+          {
+            trigger: 'blur',
+            required: true,
+            message: '请输入台区变压器容量'
+          },
+          {
+            pattern: /^(1600|1[6-9][0-9]|[2-9][0-9]{2}|1[0-5][0-9]{2})$/,
+            message: '请输入160-1600的整数',
+            trigger: 'blur'
+          }
+        ],
+        power_safe: [
+          {
+            trigger: 'blur',
+            required: true,
+            message: '请输入安全输入功率'
+          },
+          {
+            pattern: /^(400|[1-3][0-9]{2}|[1-9][0-9]?)$/,
+            message: '请输入0-400的整数',
+            trigger: 'blur'
+          }
+        ],
+        power_discharge: [
+          {
+            trigger: 'blur',
+            required: true,
+            message: '请输入储能最大放电功率'
+          },
+          { pattern: /^(150|[1-1][0-9]?|[1-9])$/, message: '请输入0-150的整数', trigger: 'blur' }
+        ],
+        power_charge: [
+          {
+            trigger: 'blur',
+            required: true,
+            message: '请输入储能最大充电功率'
+          },
+          { pattern: /^(150|[1-1][0-9]?|[1-9])$/, message: '请输入0-150的整数', trigger: 'blur' }
+        ],
+        backflow: [
+          {
+            trigger: 'blur',
+            required: true,
+            message: '请输入防逆流回差'
+          },
+          {
+            pattern: /^(300|[1-2][0-9]{2}|[1-9][0-9])$/,
+            message: '请输入10-300的整数',
+            trigger: 'blur'
+          }
+        ],
+        overload: [
+          {
+            trigger: 'blur',
+            required: true,
+            message: '请输入防过载回差'
+          },
+          {
+            pattern: /^(300|[1-2][0-9]{2}|[1-9][0-9])$/,
+            message: '请输入10-300的整数',
+            trigger: 'blur'
+          }
+        ]
+      },
+      ruleForm:{},
+      gatewayData1:{}
     }
   },
   mounted() {
     this.getStations()
   },
   methods: {
+    handleback() {
+      this.dispatchModal = false
+    },
+    async handleConfirm() {
+      const res = await this.$refs.detailInfo.confirm()
+      if (!res) return
+
+      this.handleSubmit()
+    },
+    async handleSubmit() {
+      try {
+        const res = await postReq('/updateGatewayParams', {
+          station_id: this.selectStationId,
+          work_mode: this.workMode,
+          ...this.ruleForm
+        })
+        if (res.errcode == 0) {
+          this.$message.success('下发成功')
+          this.dispatchModal=false
+        }
+      } catch (error) {
+        this.$message.error('下发失败')
+        this.dispatchModal=false
+
+      }
+    },
     updateGatewayData(gatewayData) {
       this.systems[0].workmode = gatewayData.workmode
       this.systems[0].emu = gatewayData.emu
@@ -171,19 +383,28 @@ export default {
       this.msgModal = true
     },
     //下发
-    async handleDispatch() {
+    // handleDispatch
-      console.log(this.workMode)
+    async openDispatchModal() {
+      
       try {
-        const res = await postReq('/updateStation', {
+        const res = await getReq('/queryDevicByCategory', {
           station_id: this.selectStationId,
-          work_mode: this.workMode
+          category: 0
         })
-        if (res.errcode == 0) {
+
-          this.$message.success('下发成功')
+        this.ruleForm=Object.keys(res.gateway).reduce((acc, key) => {
-        }
+          const value = res.gateway[key];
+          acc[key] = typeof value === 'number' ? String(value) : value;
+          return acc;
+        }, {});
+        this.dispatchModal = true
+        
+      
       } catch (error) {
-        this.$message.error('下发失败')
+        this.ruleForm = {}
+
       }
+      
     },
     //场站切换
     getStationChange(val) {
@@ -212,7 +433,6 @@ export default {
         res.data.device_group.forEach((Element, index) => {
           this.systems[index].num = Element.count
           this.systems[index].power = Element.power
-          
           this.systems[index].workmode = Element.workmode
           if (Element.category == 1) {
             this.message = Element.msg
@@ -316,4 +536,13 @@ export default {
     }
   }
 }
+:deep(.ant-input-group-addon) {
+  color: #fff;
+  border: 1px solid $border-color;
+}
+:deep(.ant-form-item-label) {
+  color: #fff;
+  font-size: 16px !important;
+  width: 180px !important;
+}
 </style>