tall4-pc/src/views/function-config.vue

<template>
  <!-- 设置站点选择 和 设备下发状态 -->
  <DeviceSelectAndSelect @search="onSearch" :status="data.status" />

  <el-form label-position="top" :model="data" ref="functionForm">
    <el-row :gutter="20">
      <el-col :span="12">
        <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-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">
        <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-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">
        <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-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">
        <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-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">
        <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-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">
        <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-form-item label="设置温度高阈值" prop="temperatureHigh">
          <el-input-number :min="0" v-model="data.temperatureHigh" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <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-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-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-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="0">不加密</el-radio>
          <el-radio v-model="data.securityMode" :label="1">加密</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="0">按设定时间点上报</el-radio>
            <el-radio :label="1">按设定周期上报(分钟)</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20" v-if="data.report.type === 0">
      <el-col :lg="6" :xl="4" :md="8" :sm="12" v-for="(item, index) in data.report.timePoints" :key="index">
        <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-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20" v-else>
      <el-col :span="12">
        <el-form-item prop="report.cycle">
          <el-input-number :min="0" v-model="data.report.cycle" />
        </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, ref } from 'vue';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import { cloneDeep, isDate } from 'lodash';
import { getConfigFunction, createConfigFunction } from 'apis/index';
import DeviceSelectAndSelect from 'components/device-select-and-status.vue';
import Refresh from 'components/refresh.vue';

const data = ref({
  frequency: {
    so2: 0, // SO2采样频率
    metal: 0, // 金属腐蚀采样频率
    th: 0, // 温湿度 采样频率
    salt: 0, // 盐雾 采样频率
  }, // 采样频率
  count: 0, // 采集个数
  time: new Date(), // 设置时间
  batteryLow: 0, // 电池电压低阈值
  batteryHigh: 0, // 电池电压高阈值
  sunHigh: 0, // 太阳能电压高阈值
  humidityHigh: 0, // 湿度高阈值
  temperatureLow: 0, // 温度低阈值
  temperatureHigh: 0, // 温度高阈值
  securityMode: 0, // 安全模式 0->不加密 1->加密
  corrosiveType1: '', // 金属腐蚀类型
  corrosiveType2: '', // 金属腐蚀类型
  corrosiveType3: '', // 金属腐蚀类型
  corrosiveType4: '', // 金属腐蚀类型
  report: {
    type: 0, // 上报周期类型 0->时间点  1->周期
    timePoints: [0, 0, 0, 0, 0, 0], // 设置时间点
    cycle: 0, // 上报周期分钟数
  },
  status: { get: 0, set: 0 },
});

// 金属腐蚀的类型
const types = ref([
  { value: 0, type: '锌' },
  { value: 1, type: '铝' },
  { value: 2, type: '铜' },
  { value: 3, type: '钢' },
]);

const functionForm = ref(null); // form
const store = useStore();
const currentDeviceId = computed(() => store.state.device.currentDeviceId);

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

// 提交表单
const onSubmit = () => {
  functionForm.value.validate(async () => {
    try {
      const param = cloneDeep({ ...data.value, deviceId: currentDeviceId.value });
      param.time = new Date(param.time).getTime();
      if (param.report.type === 0) {
        // 按时间点上报 格式化时间格式
        const points = [...param.report.timePoints];
        for (let i = 0; i < points.length; i++) {
          if (points[i] && isDate(points[i])) {
            points[i] = formatTime(points[i]);
          }
        }
        param.report.timePoints = points;
      }
      await createConfigFunction(param);
      ElMessage.success('提交成功');
    } catch (error) {
      ElMessage.error('提交失败, 请稍后重试');
      throw new Error(error);
    }
  });
};

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

/**
 * 查询网络参数配置
 * @param {string} deviceId 设备id
 * @param {number} type 0数据库查询 1刷新查询
 */
const onSearch = async (deviceId, type = 0) => {
  const params = { deviceId, type };
  store.commit('device/setCurrentDeviceId', deviceId);
  const resData = await getConfigFunction(params);
  data.value = resData;
};
</script>