tall4-pc/src/components/function-config-applied.vue

<template>
  <el-row :gutter="10">
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>设置金属腐蚀采样频率(分钟)：</span>
      <span>{{ data.frequency.metal }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>设置温湿度采样频率(分钟)：</span>
      <span>{{ data.frequency.th }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>设置SO2采样频率(分钟)：</span>
      <span>{{ data.frequency.so2 }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>设置盐雾采样频率(分钟)：</span>
      <span>{{ data.frequency.salt }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>设置时间：</span>
      <span>{{ formatMsTime(data.time) }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>设置金属腐蚀采集个数：</span>
      <span>{{ data.count }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>设置电池电压低阈值：</span>
      <span>{{ data.batteryLow }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>设置电池电压高阈值：</span>
      <span>{{ data.batteryHigh }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>设置太阳能电压高阈值：</span>
      <span>{{ data.sunHigh }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>设置湿度高阈值：</span>
      <span>{{ data.humidityHigh }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>设置温度低阈值：</span>
      <span>{{ data.temperatureLow }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>设置温度高阈值：</span>
      <span>{{ data.temperatureHigh }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>选择金属通道1类型：</span>
      <span>{{ formatCorrosiveType(data.corrosiveType1) }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>选择金属通道2类型：</span>
      <span>{{ formatCorrosiveType(data.corrosiveType2) }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>选择金属通道3类型：</span>
      <span>{{ formatCorrosiveType(data.corrosiveType3) }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>选择金属通道4类型：</span>
      <span>{{ formatCorrosiveType(data.corrosiveType4) }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>安全模式：</span>
      <span>{{ formatMode(data.securityMode) }}</span>
    </el-col>
  </el-row>

  <el-row>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>上报类型：</span>
      <span class="mr-8">{{ formatReportType(data.report.type) }}</span>

      <span v-if="data.report.type === 'POINT'">{{ data.report.reportTimePoints }}</span>
      <span v-else>{{ data.report.cycle }}分钟</span>
    </el-col>
  </el-row>

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

<script setup>
import { computed, ref, watch, defineEmits, defineProps } from 'vue';
import { useStore } from 'vuex';
import { getConfigAppliedNetwork } from 'apis/index';
import { formatMsTime } from 'utils/time';
import { functionConfig, corrosiveTypes } from '@/config/config';

const store = useStore();
const currentDeviceId = computed(() => store.state.device.currentDeviceId);
const data = ref(functionConfig); // 实际数据
const emit = defineEmits(['status']);
const props = defineProps({ activeName: String });

/**
 * 查询网络参数配置 设备真实参数
 * @param {string} deviceId 设备id
 */
const onSearch = async deviceId => {
  try {
    const params = { deviceId };
    const resData = await getConfigAppliedNetwork(params);
    data.value = resData || functionConfig;
    if (resData && resData.status) {
      emit('status', resData.status);
    }
  } catch (error) {
    throw new Error(error);
  }
};

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

/**
 * 转化安全模式
 * @param {string|number} time 时间ms
 */
function formatMode(mode) {
  return mode === 'OPEN' ? '不加密' : '加密';
}

/**
 * 转化上报类型显示
 * @param {string} reportType 上报类型
 */
function formatReportType(reportType) {
  return reportType === 'POINT' ? '按时间点上报' : '按周期上报';
}

/**
 * 格式化金属腐蚀类型
 * @param {string} type 服务端返回的类型
 * @return {string} type 对应的文字名称
 */
function formatCorrosiveType(type) {
  const target = corrosiveTypes.find(item => item.value === type);
  return target && target.type ? target.type : '';
}
</script>