You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
147 lines
4.5 KiB
147 lines
4.5 KiB
<template>
|
|
<el-form ref="networkForm" :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="上报IP1地址" prop="ip1">
|
|
<el-input v-model="data.ip1"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="上报端口号1" prop="port1">
|
|
<el-input v-model="data.port1"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="上报IP2地址" prop="ip2">
|
|
<el-input v-model="data.ip2"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="上报端口号2" prop="port2">
|
|
<el-input v-model="data.port2"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="上报IP3地址" prop="ip3">
|
|
<el-input v-model="data.ip3"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="上报端口号3" prop="port3">
|
|
<el-input v-model="data.port3"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="备用ip地址" prop="ipBackup">
|
|
<el-input v-model="data.ipBackup"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="备用端口号" prop="portBackup">
|
|
<el-input v-model="data.portBackup"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="用户名" prop="account">
|
|
<el-input v-model="data.account"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="密码" prop="password">
|
|
<el-input v-model="data.password"></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :lg="8" :md="12" :span="12" :xl="6" :xs="24">
|
|
<el-form-item label="APN" prop="apn">
|
|
<el-input v-model="data.apn"></el-input>
|
|
</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 { createConfigNetwork, getConfigAppliedNetwork } from 'apis';
|
|
import Refresh from 'components/refresh.vue';
|
|
import { networkConfig } from '@/config/config';
|
|
|
|
const data = ref(networkConfig);
|
|
const networkForm = ref(null); // form
|
|
const store = useStore();
|
|
const currentDeviceId = computed(() => store.state.device.currentDeviceId);
|
|
const emit = defineEmits(['status']);
|
|
const props = defineProps({ activeName: String });
|
|
|
|
/**
|
|
* 查询网络参数配置
|
|
* @param {string} deviceId 设备id
|
|
* @param {number} type 0数据库查询 1刷新查询
|
|
*/
|
|
async function onSearch(deviceId, type = 0) {
|
|
try {
|
|
const params = {
|
|
deviceId,
|
|
type,
|
|
};
|
|
const resData = await getConfigAppliedNetwork(params);
|
|
data.value = resData || networkConfig;
|
|
if (resData && resData.status) {
|
|
emit('status', resData.status);
|
|
} else {
|
|
emit('status', '');
|
|
}
|
|
} catch (error) {
|
|
throw new Error(error);
|
|
}
|
|
}
|
|
|
|
watch(
|
|
currentDeviceId,
|
|
newDeviceId => {
|
|
newDeviceId && props.activeName === 'network' && onSearch(newDeviceId);
|
|
},
|
|
{ immediate: true },
|
|
);
|
|
|
|
// 提交表单
|
|
const onSubmit = () => {
|
|
networkForm.value.validate(async () => {
|
|
const param = {
|
|
...data.value,
|
|
deviceId: currentDeviceId.value,
|
|
};
|
|
try {
|
|
await createConfigNetwork(param);
|
|
ElMessage.success('提交成功');
|
|
} catch (error) {
|
|
console.error('error: ', error);
|
|
ElMessage.error('提交失败, 请稍后重试');
|
|
}
|
|
});
|
|
};
|
|
|
|
// 重置表单
|
|
const onReset = () => {
|
|
networkForm.value.resetFields();
|
|
};
|
|
|
|
// currentDeviceId && onSearch(currentDeviceId.value);
|
|
</script>
|
|
|