feat: 调整时间点格式

src/components/function-config-pending.vue

@@ -1,97 +1,97 @@
 <template>
-  <el-form label-position="top" :model="data" ref="functionForm">
+  <el-form ref="functionForm" :model="data" label-position="top">
     <el-row :gutter="20">
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="设置金属腐蚀采样频率(分钟)" prop="frequency.metal">
-          <el-input-number :min="0" v-model="data.frequency.metal" />
+          <el-input-number v-model="data.frequency.metal" :min="0" />
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="设置温湿度采样频率(分钟)" prop="frequency.th">
-          <el-input-number :min="0" v-model="data.frequency.th" />
+          <el-input-number v-model="data.frequency.th" :min="0" />
         </el-form-item>
       </el-col>
 
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="设置SO2采样频率(分钟)" prop="frequency.so2">
-          <el-input-number :min="0" v-model="data.frequency.so2" />
+          <el-input-number v-model="data.frequency.so2" :min="0" />
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="设置盐雾采样频率(分钟)" prop="frequency.salt">
-          <el-input-number :min="0" v-model="data.frequency.salt" />
+          <el-input-number v-model="data.frequency.salt" :min="0" />
         </el-form-item>
       </el-col>
 
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <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-date-picker v-model="data.time" placeholder="设置时间" type="datetime"></el-date-picker>
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="设置金属腐蚀采集个数" prop="count">
-          <el-input-number :min="0" v-model="data.count" />
+          <el-input-number v-model="data.count" :min="0" />
         </el-form-item>
       </el-col>
 
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="设置电池电压低阈值" prop="batteryLow">
-          <el-input-number :min="0" v-model="data.batteryLow" />
+          <el-input-number v-model="data.batteryLow" :min="0" />
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="设置电池电压高阈值" prop="batteryHigh">
-          <el-input-number :min="0" v-model="data.batteryHigh" />
+          <el-input-number v-model="data.batteryHigh" :min="0" />
         </el-form-item>
       </el-col>
 
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="设置太阳能电压高阈值" prop="sunHigh">
-          <el-input-number :min="0" v-model="data.sunHigh" />
+          <el-input-number v-model="data.sunHigh" :min="0" />
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="设置湿度高阈值" prop="humidityHigh">
-          <el-input-number :min="0" v-model="data.humidityHigh" />
+          <el-input-number v-model="data.humidityHigh" :min="0" />
         </el-form-item>
       </el-col>
 
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="设置温度低阈值" prop="temperatureLow">
-          <el-input-number :min="0" v-model="data.temperatureLow" />
+          <el-input-number v-model="data.temperatureLow" :min="0" />
         </el-form-item>
       </el-col>
-      <el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <el-form-item label="设置温度高阈值" prop="temperatureHigh">
-          <el-input-number :min="0" v-model="data.temperatureHigh" />
+          <el-input-number v-model="data.temperatureHigh" :min="0" />
         </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 :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <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" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <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" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <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" :xs="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
         <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>
@@ -121,18 +121,18 @@
       </el-col>
     </el-row>
 
-    <el-row :gutter="20" v-if="data.report.type === 'POINT'">
+    <el-row v-if="data.report.type === 'POINT'" :gutter="20">
-      <el-col :lg="6" :xl="4" :md="8" :sm="12" v-for="(item, index) in data.report.timePoints" :key="index">
+      <el-col v-for="(item, index) in data.report.timePoints" :key="index" :lg="6" :md="8" :sm="12" :xl="4">
         <el-form-item prop="report.timePoints" style="margin-bottom: 10px !important">
-          <el-time-picker format="HH:mm" v-model="data.report.timePoints[index]" :placeholder="`上报时间点${index + 1}`"></el-time-picker>
+          <el-time-picker v-model="data.report.timePoints[index]" :placeholder="`上报时间点${index + 1}`" format="HH:mm"></el-time-picker>
         </el-form-item>
       </el-col>
     </el-row>
 
-    <el-row :gutter="20" v-else>
+    <el-row v-else :gutter="20">
       <el-col :span="12">
         <el-form-item prop="report.cycle">
-          <el-input-number :min="0" v-model="data.report.cycle" />
+          <el-input-number v-model="data.report.cycle" :min="0" />
         </el-form-item>
       </el-col>
     </el-row>
@@ -150,14 +150,14 @@
 </template>
 
 <script setup>
-import { computed, ref, watch, defineEmits, defineProps } from 'vue';
+import { computed, defineEmits, defineProps, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { ElMessage } from 'element-plus';
 import cloneDeep from 'lodash/cloneDeep';
 import isDate from 'lodash/isDate';
-import { getConfigFunction, createConfigFunction } from 'apis/index';
+import { createConfigFunction, getConfigFunction } from 'apis/index';
 import Refresh from 'components/refresh.vue';
-import { functionConfig, corrosiveTypes } from '@/config/config';
+import { corrosiveTypes, functionConfig } from '@/config/config';
 
 const data = ref(functionConfig);
 // 金属腐蚀的类型
@@ -173,6 +173,7 @@ const props = defineProps({ activeName: String });
  * 格式化时间
  */
 const formatTime = date => {
+  if (!isDate(date)) return '';
   const hour = date.getHours();
   const minute = date.getMinutes();
   return `${hour}:${minute}`;
@@ -184,15 +185,37 @@ const formatTime = date => {
  * @param {number} type 0数据库查询 1刷新查询
  */
 async function onSearch(deviceId, type = 0) {
-  const params = { deviceId, type };
+  const params = {
+    deviceId,
+    type,
+  };
   const resData = await getConfigFunction(params);
   data.value = resData || functionConfig;
   if (resData && resData.time) {
+    // 格式化ms为日期格式
     resData.time = new Date(+resData.time);
   }
   if (resData && resData.status) {
+    // 设置 设置状态
     emit('status', resData.status);
   }
+
+  if (resData && resData.report.type === 'POINT') {
+    const { timePoints } = resData.report;
+    // 如果是按照时间点上传的
+    if (timePoints && timePoints.length) {
+      for (let i = 0; i < timePoints.length; i++) {
+        const date = new Date().toLocaleDateString();
+        const item = resData.report.timePoints[i];
+        const reg = /^\d{1,2}:\d{1,2}$/;
+        if (item && reg.test(item)) {
+          resData.report.timePoints[i] = new Date(`${date} ${item}`);
+        } else {
+          resData.report.timePoints[i] = '';
+        }
+      }
+    }
+  }
 }
 
 watch(
@@ -210,13 +233,16 @@ const onSubmit = () => {
       if (!currentDeviceId.value) {
         return ElMessage.error('请选择站点');
       }
-      const param = cloneDeep({ ...data.value, deviceId: currentDeviceId.value });
+      const param = cloneDeep({
+        ...data.value,
+        deviceId: currentDeviceId.value,
+      });
       param.time = new Date(param.time).getTime();
       if (param.report.type === 'POINT') {
         // 按时间点上报 格式化时间格式
         const points = [...param.report.timePoints];
         for (let i = 0; i < points.length; i++) {
-          if (points[i] && isDate(points[i])) {
+          if (points[i]) {
             points[i] = formatTime(points[i]);
           }
         }