feat: function-config responsive

src/views/function-config.vue

@@ -4,78 +4,68 @@
 
   <el-form label-position="top" :model="data" ref="functionForm">
     <el-row :gutter="20">
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="设置金属腐蚀采样频率(分钟)" prop="frequency.metal">
           <el-input-number :min="0" v-model="data.frequency.metal" />
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="设置温湿度采样频率(分钟)" prop="frequency.th">
           <el-input-number :min="0" v-model="data.frequency.th" />
         </el-form-item>
       </el-col>
-    </el-row>
 
-    <el-row :gutter="20">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-      <el-col :span="12">
         <el-form-item label="设置SO2采样频率(分钟)" prop="frequency.so2">
           <el-input-number :min="0" v-model="data.frequency.so2" />
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="设置盐雾采样频率(分钟)" prop="frequency.salt">
           <el-input-number :min="0" v-model="data.frequency.salt" />
         </el-form-item>
       </el-col>
-    </el-row>
 
-    <el-row :gutter="20">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-      <el-col :span="12">
         <el-form-item label="设置时间" prop="time">
           <!-- <el-input v-model="data.time"></el-input> -->
           <el-date-picker v-model="data.time" type="datetime" placeholder="设置时间"></el-date-picker>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="设置金属腐蚀采集个数" prop="count">
           <el-input-number :min="0" v-model="data.count" />
         </el-form-item>
       </el-col>
-    </el-row>
 
-    <el-row :gutter="20">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-      <el-col :span="12">
         <el-form-item label="设置电池电压低阈值" prop="batteryLow">
           <el-input-number :min="0" v-model="data.batteryLow" />
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="设置电池电压高阈值" prop="batteryHigh">
           <el-input-number :min="0" v-model="data.batteryHigh" />
         </el-form-item>
       </el-col>
-    </el-row>
 
-    <el-row :gutter="20">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-      <el-col :span="12">
         <el-form-item label="设置太阳能电压高阈值" prop="sunHigh">
           <el-input-number :min="0" v-model="data.sunHigh" />
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="设置湿度高阈值" prop="humidityHigh">
           <el-input-number :min="0" v-model="data.humidityHigh" />
         </el-form-item>
       </el-col>
-    </el-row>
 
-    <el-row :gutter="20">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
-      <el-col :span="12">
         <el-form-item label="设置温度低阈值" prop="temperatureLow">
           <el-input-number :min="0" v-model="data.temperatureLow" />
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="设置温度高阈值" prop="temperatureHigh">
           <el-input-number :min="0" v-model="data.temperatureHigh" />
         </el-form-item>
@@ -83,28 +73,28 @@
     </el-row>
 
     <el-row :gutter="20">
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="选择金属通道1类型" prop="securityMode">
           <el-select v-model="data.corrosiveType1" placeholder="选择金属腐蚀类型">
             <el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
           </el-select>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="选择金属通道2类型" prop="corrosiveType">
           <el-select v-model="data.corrosiveType2" placeholder="选择金属腐蚀类型">
             <el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
           </el-select>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="选择金属通道3类型" prop="securityMode">
           <el-select v-model="data.corrosiveType3" placeholder="选择金属腐蚀类型">
             <el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>
           </el-select>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
         <el-form-item label="选择金属通道4类型" prop="corrosiveType">
           <el-select v-model="data.corrosiveType4" placeholder="选择金属腐蚀类型">
             <el-option v-for="type in types" :key="type.value" :label="type.type" :value="type.value"></el-option>