天气字段规范

src/views/SchedulingPage/weatherManageSub/AddWindow.vue

@@ -126,7 +126,7 @@ const rules = reactive({
           <el-row>
             <el-col :span="8" class="content-col-label">温度：</el-col>
             <el-col :span="16" class="content-col-value">
-              <el-form-item prop="temperature">
+              <el-form-item prop="temperature" style="padding: 0;margin: 0;">
                 <el-input maxlength="11" :input-style="inputStyle" v-model="addData.temperature" style="width: 510px" />
               </el-form-item>
             </el-col>
@@ -135,7 +135,7 @@ const rules = reactive({
           <el-row>
             <el-col :span="8" class="content-col-label">风速：</el-col>
             <el-col :span="16" class="content-col-value">
-              <el-form-item prop="wind">
+              <el-form-item prop="wind" style="padding: 0;margin: 0;">
                 <el-input :input-style="inputStyle" maxlength="11" v-model="addData.wind" style="width: 510px" />
               </el-form-item>
             </el-col>
@@ -143,7 +143,7 @@ const rules = reactive({
           <el-row>
             <el-col :span="8" class="content-col-label">光照：</el-col>
             <el-col :span="16" class="content-col-value">
-              <el-form-item prop="illumination">
+              <el-form-item prop="illumination" style="padding: 0;margin: 0;">
                 <el-input :input-style="inputStyle" maxlength="11" v-model="addData.illumination"
                   style="width: 510px" />
               </el-form-item>
@@ -153,7 +153,7 @@ const rules = reactive({
           <el-row>
             <el-col :span="8" class="content-col-label">排序：</el-col>
             <el-col :span="16" class="content-col-value">
-              <el-form-item prop="sort">
+              <el-form-item prop="sort" style="padding: 0;margin: 0;">
                 <el-input :input-style="inputStyle" maxlength="11" v-model="addData.sort" style="width: 510px" />
               </el-form-item>
             </el-col>
@@ -166,7 +166,7 @@ const rules = reactive({
             </el-col>
             <el-col :span="5" class="content-col-label">自动偏差百分比（%d）：</el-col>
             <el-col :span="7" class="content-col-value">
-              <el-form-item prop="diffPercentage">
+              <el-form-item prop="diffPercentage" style="padding: 0;margin: 0;">
                 <el-input v-float-number :input-style="inputStyle" maxlength="11" v-model="addData.diffPercentage"
                   style="width: 240px" />
               </el-form-item>
@@ -176,7 +176,7 @@ const rules = reactive({
           <el-row>
             <el-col :span="5" class="content-col-label">自动验证循环时间（分钟）：</el-col>
             <el-col :span="7" class="content-col-value">
-              <el-form-item prop="timeoutMin">
+              <el-form-item prop="timeoutMin" style="padding: 0;margin: 0;">
                 <el-input v-float-number :input-style="inputStyle" maxlength="11" v-model="addData.timeoutMin"
                   style="width: 240px" />
               </el-form-item>
@@ -184,7 +184,7 @@ const rules = reactive({
 
             <el-col :span="5" class="content-col-label">自动调节温度（℃）：</el-col>
             <el-col :span="7" class="content-col-value">
-              <el-form-item prop="tempRegulation">
+              <el-form-item prop="tempRegulation" style="padding: 0;margin: 0;">
                 <el-input :input-style="inputStyle" maxlength="11" v-model="addData.tempRegulation"
                   style="width: 240px" />
               </el-form-item>

src/views/SchedulingPage/weatherManageSub/ReviseWindow.vue

 <script setup>
-import {ref, defineProps, defineEmits, computed, isRef, onMounted, watchEffect} from "vue";
+import { ref, defineProps, defineEmits, computed, isRef, onMounted, watchEffect, reactive } from "vue";
 import cloneDeep from 'lodash/cloneDeep'
-import {vFloatNumber} from "@/utils/directives.js";
+import { vFloatNumber } from "@/utils/directives.js";
+
+
 
 const props = defineProps({
   open: {
@@ -12,7 +14,7 @@ const props = defineProps({
   data: {
     type: Object,
     default: {},
-    required:true
+    required: true
   }
 })
 const emit = defineEmits({
@@ -22,7 +24,31 @@ const emit = defineEmits({
   }
 })
 const reviseData = ref({})
-watchEffect(()=>{
+
+const formRef = ref()
+
+//校验规则
+const rules = reactive({
+  diffPercentage: [
+    { pattern: /^([0-9]\d{0,1}|100$)(\.\d{1,4})?$/, "message": "请输入正确的百分比格式", trigger: "blur" }
+  ],
+  wind: [
+    { pattern: /^(\d{1,11})(\.[0-9]{1,4})?$/, "message": "风速必须是1-11位实数", trigger: "blur" }
+  ],
+  illumination: [
+    { pattern: /^(\d{1,11})(\.[0-9]{1,4})?$/, "message": "光照必须是1-11位实数", trigger: "blur" }
+  ],
+  sort: [
+    { pattern: /^(\d{1,11})$/, "message": "排序必须是1-11位正整数", trigger: "blur" }
+  ],
+  timeoutMin: [
+    { pattern: /^(\d{1,11})(\.[0-9]{1,4})?$/, "message": "判断时间必须是1-10位实数", trigger: "blur" }
+  ],
+  temperature: [
+    { pattern: /^(-?\d{1,11})(\.[0-9]{1,4})?$/, message: "请输入正确的调节温度", trigger: "blur" }
+  ]
+});
+watchEffect(() => {
   // reviseData.value = {...props.data}
   props.data.transfers = []
   props.data.updateNullFields = ''
@@ -44,80 +70,98 @@ const switchingisAuto = computed({
     }
   }
 })  // 可写计算属性,手动、自动模式切换
-function onOpen(){
+function onOpen() {
   // console.log('props.data数据',props.data)
   // console.log('修改弹窗接收到的数据',reviseData.value)
 }
 </script>
 
 <template>
-  <el-dialog
-      v-model="props.open"
-      width="1000px"
-      title="自定义修改"
-      @close="emit('onCancel')"
-      @open="onOpen">
+  <el-dialog v-model="props.open" width="1000px" title="自定义修改" @close="emit('onCancel')" @open="onOpen">
     <template #default>
       <div class="dialog-content">
+        <el-form ref="formRef" :model="reviseData" :rules="rules" label-width="auto">
           <el-row style="border-top: #a6c3e9 1px solid">
             <el-col :span="8" class="content-col-label">自定义名称：</el-col>
             <el-col :span="16" class="content-col-value">
-            <el-input maxlength="11" :input-style="inputStyle" v-model="reviseData.customizeName" style="width: 510px"/>
+              <el-input maxlength="11" :input-style="inputStyle" v-model="reviseData.customizeName"
+                style="width: 510px" />
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="8" class="content-col-label">干预模式：</el-col>
             <el-col :span="16" class="content-col-value">
               <el-radio-group v-model="reviseData.isFixed">
-              <el-radio value="固定模式" :style="{marginLeft:'10px'}">固定模式</el-radio>
-              <el-radio value="气象仪模式" :style="{marginLeft:'-15px'}">气象仪模式</el-radio>
+                <el-radio value="固定模式" :style="{ marginLeft: '10px' }">固定模式</el-radio>
+                <el-radio value="气象仪模式" :style="{ marginLeft: '-15px' }">气象仪模式</el-radio>
               </el-radio-group>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="8" class="content-col-label">温度：</el-col>
             <el-col :span="16" class="content-col-value">
-            <el-input maxlength="11" :input-style="inputStyle" v-model="reviseData.temperature" style="width: 510px"/>
+              <el-form-item prop="temperature" style="padding: 0;margin: 0;">
+                <el-input maxlength="11" :input-style="inputStyle" v-model="reviseData.temperature"
+                  style="width: 510px" />
+              </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="8" class="content-col-label">风速：</el-col>
             <el-col :span="16" class="content-col-value">
-            <el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.wind" style="width: 510px"/>
+              <el-form-item prop="wind" style="padding: 0;margin: 0;">
+                <el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.wind" style="width: 510px" />
+              </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="8" class="content-col-label">光照：</el-col>
             <el-col :span="16" class="content-col-value">
-            <el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.illumination" style="width: 510px"/>
+              <el-form-item prop="illumination" style="padding: 0;margin: 0;">
+                <el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.illumination"
+                  style="width: 510px" />
+              </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="8" class="content-col-label">排序：</el-col>
             <el-col :span="16" class="content-col-value">
-            <el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.sort" style="width: 510px"/>
+              <el-form-item prop="sort" style="padding: 0;margin: 0;">
+                <el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.sort" style="width: 510px" />
+              </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="5" class="content-col-label">切换自动模式：</el-col>
             <el-col :span="7" class="content-col-value">
-            <el-checkbox :style="{marginLeft:'10px'}" v-model="switchingisAuto" label="自动模式"/>
+              <el-checkbox :style="{ marginLeft: '10px' }" v-model="switchingisAuto" label="自动模式" />
             </el-col>
             <el-col :span="5" class="content-col-label">自动偏差百分比（%d）：</el-col>
             <el-col :span="7" class="content-col-value">
-            <el-input v-float-number :input-style="inputStyle" maxlength="11" v-model="reviseData.diffPercentage" style="width: 240px"/>
+              <el-form-item prop="diffPercentage" style="padding: 0;margin: 0;">
+                <el-input v-float-number :input-style="inputStyle" maxlength="11" v-model="reviseData.diffPercentage"
+                  style="width: 240px" />
+              </el-form-item>
             </el-col>
           </el-row>
           <el-row>
             <el-col :span="5" class="content-col-label">自动验证循环时间（分钟）：</el-col>
             <el-col :span="7" class="content-col-value">
-            <el-input v-float-number :input-style="inputStyle" maxlength="11" v-model="reviseData.timeoutMin" style="width: 240px"/>
+              <el-form-item prop="timeoutMin" style="padding: 0;margin: 0;">
+                <el-input v-float-number :input-style="inputStyle" maxlength="11" v-model="reviseData.timeoutMin"
+                  style="width: 240px" />
+              </el-form-item>
             </el-col>
             <el-col :span="5" class="content-col-label">自动调节温度（℃）：</el-col>
             <el-col :span="7" class="content-col-value">
-            <el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.tempRegulation" style="width: 240px"/>
+              <el-form-item prop="tempRegulation" style="padding: 0;margin: 0;">
+                <el-input :input-style="inputStyle" maxlength="11" v-model="reviseData.tempRegulation"
+                  style="width: 240px" />
+              </el-form-item>
             </el-col>
           </el-row>
+        </el-form>
+
       </div>
     </template>
     <template #footer>
@@ -130,7 +174,6 @@ function onOpen(){
 </template>
 
 <style scoped>
-
 .el-row {
   color: black;
   height: 35px;
@@ -158,10 +201,12 @@ function onOpen(){
 .el-input {
   color: black;
 }
-.el-radio{
+
+.el-radio {
   color: black;
 }
-.el-checkbox{
+
+.el-checkbox {
   color: black;
 }
 </style>
\ No newline at end of file