tall4-pc/src/components/network-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>上报IP地址1：</span>
      <span>{{ appliedData.ip1 }}</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>{{ appliedData.port1 }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>上报IP地址2：</span>
      <span>{{ appliedData.ip2 }}</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>{{ appliedData.port2 }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>上报IP地址3：</span>
      <span>{{ appliedData.ip3 }}</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>{{ appliedData.port3 }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>上报IP地址4：</span>
      <span>{{ appliedData.ip4 }}</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>{{ appliedData.port4 }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>备用ip地址：</span>
      <span>{{ appliedData.ipBackup }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>备用端口号：</span>
      <span>{{ appliedData.portBackup }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>用户名：</span>
      <span>{{ appliedData.account }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>密码：</span>
      <span>{{ appliedData.password }}</span>
    </el-col>
    <el-col :xs="24" :md="12" :lg="8" :xl="6" class="text-sm text-gray-500 py-3">
      <span>APN：</span>
      <span>{{ appliedData.apn }}</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';

const originData = {
  ip1: '',
  port1: '',
  ip2: '',
  port2: '',
  ip3: '',
  port3: '',
  ipBackup: '',
  portBackup: '',
  account: '',
  password: '',
  apn: '',
  status: 'PENDING',
};
const store = useStore();
const currentDeviceId = computed(() => store.state.device.currentDeviceId);
const appliedData = ref(originData); // 实际数据
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);
    appliedData.value = resData || originData;
    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 },
);
</script>