13 changed files with 336 additions and 180 deletions
@ -0,0 +1,110 @@ |
|||||
|
<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> |
@ -0,0 +1,152 @@ |
|||||
|
<template> |
||||
|
<el-form label-position="top" :model="data" ref="networkForm"> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
||||
|
<el-form-item label="上报IP1地址" prop="ip1"> |
||||
|
<el-input v-model="data.ip1"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
||||
|
<el-form-item label="上报端口号1" prop="port1"> |
||||
|
<el-input v-model="data.port1"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
|
||||
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
||||
|
<el-form-item label="上报IP2地址" prop="ip2"> |
||||
|
<el-input v-model="data.ip2"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
||||
|
<el-form-item label="上报端口号2" prop="port2"> |
||||
|
<el-input v-model="data.port2"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
|
||||
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
||||
|
<el-form-item label="上报IP3地址" prop="ip3"> |
||||
|
<el-input v-model="data.ip3"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
||||
|
<el-form-item label="上报端口号3" prop="port3"> |
||||
|
<el-input v-model="data.port3"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
|
||||
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
||||
|
<el-form-item label="备用ip地址" prop="ipBackup"> |
||||
|
<el-input v-model="data.ipBackup"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
||||
|
<el-form-item label="备用端口号" prop="portBackup"> |
||||
|
<el-input v-model="data.portBackup"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
|
||||
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
||||
|
<el-form-item label="用户名" prop="account"> |
||||
|
<el-input v-model="data.account"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
||||
|
<el-form-item label="密码" prop="password"> |
||||
|
<el-input v-model="data.password"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
|
||||
|
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
||||
|
<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, ref, watch, defineEmits, defineProps } from 'vue'; |
||||
|
import { useStore } from 'vuex'; |
||||
|
import { ElMessage } from 'element-plus'; |
||||
|
import { getConfigNetwork, createConfigNetwork } from 'apis/index'; |
||||
|
import Refresh from 'components/refresh.vue'; |
||||
|
|
||||
|
const originData = { |
||||
|
ip1: '', |
||||
|
port1: '', |
||||
|
ip2: '', |
||||
|
port2: '', |
||||
|
ip3: '', |
||||
|
port3: '', |
||||
|
ipBackup: '', |
||||
|
portBackup: '', |
||||
|
account: '', |
||||
|
password: '', |
||||
|
apn: '', |
||||
|
status: 'PENDING', |
||||
|
}; |
||||
|
const data = ref(originData); |
||||
|
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 getConfigNetwork(params); |
||||
|
data.value = resData || originData; |
||||
|
if (resData && resData.status) { |
||||
|
emit('status', resData.status); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
throw new Error(error); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
watch( |
||||
|
currentDeviceId, |
||||
|
newDeviceId => { |
||||
|
newDeviceId && props.activeName === 'pending' && 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> |
@ -1,141 +1,28 @@ |
|||||
<template> |
<template> |
||||
<!-- 设置站点选择 和 设备下发状态 --> |
<!-- 设置站点选择 和 设备下发状态 --> |
||||
<DeviceSelectAndSelect @search="onSearch" :status="data.status" /> |
<DeviceSelectAndStatus @search="onSearch" :status="status" /> |
||||
|
|
||||
<el-form label-position="top" :model="data" ref="networkForm"> |
<el-tabs v-model="activeName"> |
||||
<el-row :gutter="20"> |
<el-tab-pane label="下发参数" name="pending" :lazy="true"> |
||||
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
<NetworkConfigPending @status="setStatus" v-if="activeName === 'pending'" :active-name="activeName" /> |
||||
<el-form-item label="上报IP1地址" prop="ip1"> |
</el-tab-pane> |
||||
<el-input v-model="data.ip1"></el-input> |
<el-tab-pane label="设备参数" name="applied" :lazy="true"> |
||||
</el-form-item> |
<NetworkConfigApplied @status="setStatus" v-if="activeName === 'applied'" :active-name="activeName" /> |
||||
</el-col> |
</el-tab-pane> |
||||
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
</el-tabs> |
||||
<el-form-item label="上报端口号1" prop="port1"> |
|
||||
<el-input v-model="data.port1"></el-input> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
|
|
||||
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
|
||||
<el-form-item label="上报IP2地址" prop="ip2"> |
|
||||
<el-input v-model="data.ip2"></el-input> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
|
||||
<el-form-item label="上报端口号2" prop="port2"> |
|
||||
<el-input v-model="data.port2"></el-input> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
|
|
||||
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
|
||||
<el-form-item label="上报IP3地址" prop="ip3"> |
|
||||
<el-input v-model="data.ip3"></el-input> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
|
||||
<el-form-item label="上报端口号3" prop="port3"> |
|
||||
<el-input v-model="data.port3"></el-input> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
|
|
||||
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
|
||||
<el-form-item label="备用ip地址" prop="ipBackup"> |
|
||||
<el-input v-model="data.ipBackup"></el-input> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
|
||||
<el-form-item label="备用端口号" prop="portBackup"> |
|
||||
<el-input v-model="data.portBackup"></el-input> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
|
|
||||
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
|
||||
<el-form-item label="用户名" prop="account"> |
|
||||
<el-input v-model="data.account"></el-input> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
|
||||
<el-form-item label="密码" prop="password"> |
|
||||
<el-input v-model="data.password"></el-input> |
|
||||
</el-form-item> |
|
||||
</el-col> |
|
||||
|
|
||||
<el-col :span="12" :xs="24" :md="12" :lg="8" :xl="6"> |
|
||||
<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> |
</template> |
||||
|
|
||||
<script setup> |
<script setup> |
||||
import { computed, ref } from 'vue'; |
import { ref } from 'vue'; |
||||
import { useStore } from 'vuex'; |
import DeviceSelectAndStatus from 'components/device-select-and-status.vue'; |
||||
import { ElMessage } from 'element-plus'; |
import NetworkConfigPending from 'components/network-config-pending.vue'; |
||||
import { getConfigNetwork, createConfigNetwork } from 'apis/index'; |
import NetworkConfigApplied from 'components/network-config-applied.vue'; |
||||
import DeviceSelectAndSelect from 'components/device-select-and-status.vue'; |
|
||||
import Refresh from 'components/refresh.vue'; |
const activeName = ref('pending'); |
||||
|
const status = ref('PENDING'); |
||||
const originData = { |
|
||||
ip1: '', |
// 设置 设置状态 |
||||
port1: '', |
function setStatus(event) { |
||||
ip2: '', |
status.value = event; |
||||
port2: '', |
} |
||||
ip3: '', |
|
||||
port3: '', |
|
||||
ipBackup: '', |
|
||||
portBackup: '', |
|
||||
account: '', |
|
||||
password: '', |
|
||||
apn: '', |
|
||||
status: 'PENDING', |
|
||||
}; |
|
||||
const data = ref(originData); |
|
||||
|
|
||||
const networkForm = ref(null); // form |
|
||||
const store = useStore(); |
|
||||
const currentDeviceId = computed(() => store.state.device.currentDeviceId); |
|
||||
|
|
||||
// 提交表单 |
|
||||
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(); |
|
||||
}; |
|
||||
|
|
||||
/** |
|
||||
* 查询网络参数配置 |
|
||||
* @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 getConfigNetwork(params); |
|
||||
data.value = resData || originData; |
|
||||
}; |
|
||||
|
|
||||
currentDeviceId && onSearch(currentDeviceId.value); |
|
||||
</script> |
</script> |
||||
|
Loading…
Reference in new issue