tall3-pc-keti/src/components/config/function-config-pending.vue

<template>
  <el-form ref="functionForm" :model="data" label-position="top">
    <el-row :gutter="20">
      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
        <el-form-item label="金属腐蚀采样频率(分钟)" prop="frequency.metal">
          <el-input-number v-model="data.frequency.metal" :min="0" />
        </el-form-item>
      </el-col>
      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
        <el-form-item label="温湿度采样频率(分钟)" prop="frequency.th">
          <el-input-number v-model="data.frequency.th" :min="0" />
        </el-form-item>
      </el-col>

      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
        <el-form-item label="SO2采样频率(分钟)" prop="frequency.so2">
          <el-input-number v-model="data.frequency.so2" :min="0" />
        </el-form-item>
      </el-col>
      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
        <el-form-item label="盐雾采样频率(分钟)" prop="frequency.salt">
          <el-input-number v-model="data.frequency.salt" :min="0" />
        </el-form-item>
      </el-col>

      <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" placeholder="设置时间" type="datetime"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
        <el-form-item label="金属腐蚀采集个数" prop="count">
          <el-input-number v-model="data.count" :min="0" />
        </el-form-item>
      </el-col>

      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
        <el-form-item label="电池电压低阈值(V)" prop="batteryLow">
          <el-input-number v-model="data.batteryLow" :min="0" />
        </el-form-item>
      </el-col>
      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
        <el-form-item label="电池电压高阈值(V)" prop="batteryHigh">
          <el-input-number v-model="data.batteryHigh" :min="0" />
        </el-form-item>
      </el-col>

      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
        <el-form-item label="太阳能板电压高阈值(V)" prop="sunHigh">
          <el-input-number v-model="data.sunHigh" :min="0" />
        </el-form-item>
      </el-col>
      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
        <el-form-item label="湿度高阈值(RH%)" prop="humidityHigh">
          <el-input-number v-model="data.humidityHigh" :min="0" />
        </el-form-item>
      </el-col>

      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
        <el-form-item label="温度低阈值(℃)" prop="temperatureLow">
          <el-input-number v-model="data.temperatureLow" :min="-30" />
        </el-form-item>
      </el-col>
      <el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
        <el-form-item label="温度高阈值(℃)" prop="temperatureHigh">
          <el-input-number v-model="data.temperatureHigh" :min="0" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <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 :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 :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 :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>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="安全模式" prop="securityMode">
          <!-- <el-input v-model="data.securityMode"></el-input> -->
          <el-radio v-model="data.securityMode" label="OPEN">不加密</el-radio>
          <el-radio v-model="data.securityMode" label="ENCRYPTION">加密</el-radio>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="上报时间" prop="report.type" style="margin-bottom: 0 !important">
          <el-radio-group v-model="data.report.type">
            <el-radio label="POINT">定时上报</el-radio>
            <el-radio label="CYCLE">周期上报(分钟)</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <!--    定时上报输入-->
    <el-row v-if="data.report.type === 'POINT'" :gutter="20">
      <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 v-model="data.report.timePoints[index]" :placeholder="`上报时间点${index + 1}`" format="HH:mm"></el-time-picker>
        </el-form-item>
      </el-col>
      <el-col v-if="!data.report.timePoints || data.report.timePoints.length < 6" :lg="6" :md="8" :sm="12" :xl="4">
        <el-button plain @click="addTimePoints">
          <i class="el-icon-plus px-6"></i>
        </el-button>
      </el-col>
    </el-row>
    <!--周期上报输入-->
    <el-row v-else :gutter="20">
      <el-col :span="12">
        <el-form-item prop="report.cycle">
          <el-input-number v-model="data.report.cycle" :max="1440" :min="10" step="10" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-5 pl-2">
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-row>
  </el-form>

  <!-- 刷新下发按钮 -->
  <Refresh @refresh="onSearch(currentDeviceId, 1)" />
</template>

<script setup>
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 { createConfigFunction, getConfigAppliedFunction } from 'apis';
import Refresh from 'components/refresh.vue';
import { corrosiveTypes, functionConfig } from '@/config/config';

const data = ref(functionConfig);
// 金属腐蚀的类型
const types = ref(corrosiveTypes);

const functionForm = ref(null); // form
const store = useStore();
const currentDeviceId = computed(() => store.state.device.currentDeviceId);
const emit = defineEmits(['status']);
const props = defineProps({ activeName: String });

/**
 * 格式化时间
 */
const formatTime = date => {
  if (!isDate(date)) return '';
  const hour = date.getHours();
  const minute = date.getMinutes();
  return `${hour}:${minute}`;
};

/**
 * 查询网络参数配置
 * @param {string} deviceId 设备id
 * @param {number} type 0数据库查询 1刷新查询
 */
async function onSearch(deviceId, type = 0) {
  const params = {
    deviceId,
    type,
  };
  const resData = await getConfigAppliedFunction(params);
  if (resData && resData.time) {
    // 格式化ms为日期格式
    resData.time = new Date(+resData.time);
  }
  if (resData && resData.status) {
    // 设置 设置状态
    emit('status', resData.status);
  } else {
    emit('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] = '';
        }
      }
    } else {
      resData.report = [''];
    }
  }
  data.value = resData || functionConfig;
}

watch(
  currentDeviceId,
  newDeviceId => {
    newDeviceId && props.activeName === 'function' && onSearch(newDeviceId);
  },
  { immediate: true },
);

// 提交表单
const onSubmit = () => {
  functionForm.value.validate(async () => {
    try {
      if (!currentDeviceId.value) {
        return ElMessage.error('请选择站点');
      }
      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]) {
            points[i] = formatTime(points[i]);
          }
        }

        const validated = validateTimePoints(points);
        if (!validated) {
          ElMessage.error('上报时间点不能重复');
          return;
        }

        param.report.timePoints = points;
      }
      await createConfigFunction(param);
      ElMessage.success('提交成功');
    } catch (error) {
      throw new Error(error);
    }
  });
};

// 重置表单
const onReset = () => {
  functionForm.value.resetFields();
};

// currentDeviceId && onSearch(currentDeviceId.value);
// 添加时间上报时间点输入框
function addTimePoints() {
  const { timePoints } = data.value.report;
  console.log(data.value.report);
  if (!timePoints || !timePoints.length) {
    data.value.report.timePoints = [''];
  } else {
    if (timePoints.length >= 6) return;
    data.value.report.timePoints.push('');
  }
}

/**
 * 验证上报时间点是否重复
 * @param {array|null} points ["时:分"]
 * @returns {boolean}
 */
function validateTimePoints(points) {
  if (!points || !points.length) return true;
  const obj = {};
  points.forEach(item => {
    if (obj[item]) {
      obj[item] += 1;
    } else {
      obj[item] = 1;
    }
  });
  // eslint-disable-next-line no-restricted-syntax
  for (const key in obj) {
    if (obj[key] > 1) return false;
  }
  return true;
}
</script>