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

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

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" />
-        <device v-else :station-id="selectStationId" :system-type="systemType" @updateGatewayData="updateGatewayData" />
+        <videos
+          v-if="systemType == 4"
+          :station-id="selectStationId"
+          @updateGatewayData="updateGatewayData"
+        />
+        <device
+          v-else
+          :station-id="selectStationId"
+          :system-type="systemType"
+          @updateGatewayData="updateGatewayData"
+        />
       </div>
     </div>
     <a-modal
@@ -53,7 +64,26 @@
       :footer="null"
       :destroy-on-close="true"
     >
-   <div style="color: #fff;padding: 20px" v-html="message"></div>
+      <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,19 +102,20 @@ export default {
   data() {
     return {
       // currentKey: '储能系统',
+      dispatchModal: false,
       systemType: 1,
       value: [],
       stations: [],
       selectStationId: '',
-      message:'',
-      msgModal:false,
+      message: '',
+      msgModal: false,
       systems: [
         {
           name: '储能系统',
           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
@@ -167,23 +379,32 @@ export default {
       this.message = gatewayData.msg
     },
 
-    handleMessage(){
-      this.msgModal=true
+    handleMessage() {
+      this.msgModal = true
     },
     //下发
-    async handleDispatch() {
-      console.log(this.workMode)
+    // handleDispatch
+    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,10 +433,9 @@ 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
+          if (Element.category == 1) {
+            this.message = Element.msg
           }
         })
         this.workMode = res.data.work_mode
@@ -285,7 +505,7 @@ export default {
         color: #fff;
         padding: 10px 10px;
         cursor: pointer;
-        &:hover{
+        &:hover {
           background: $table-bg;
         }
 
@@ -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>