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> |
|||
<!-- 设置站点选择 和 设备下发状态 --> |
|||
<DeviceSelectAndSelect @search="onSearch" :status="data.status" /> |
|||
|
|||
<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)" /> |
|||
<DeviceSelectAndStatus @search="onSearch" :status="status" /> |
|||
|
|||
<el-tabs v-model="activeName"> |
|||
<el-tab-pane label="下发参数" name="pending" :lazy="true"> |
|||
<NetworkConfigPending @status="setStatus" v-if="activeName === 'pending'" :active-name="activeName" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="设备参数" name="applied" :lazy="true"> |
|||
<NetworkConfigApplied @status="setStatus" v-if="activeName === 'applied'" :active-name="activeName" /> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { computed, ref } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import { ElMessage } from 'element-plus'; |
|||
import { getConfigNetwork, createConfigNetwork } from 'apis/index'; |
|||
import DeviceSelectAndSelect from 'components/device-select-and-status.vue'; |
|||
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 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); |
|||
import { ref } from 'vue'; |
|||
import DeviceSelectAndStatus from 'components/device-select-and-status.vue'; |
|||
import NetworkConfigPending from 'components/network-config-pending.vue'; |
|||
import NetworkConfigApplied from 'components/network-config-applied.vue'; |
|||
|
|||
const activeName = ref('pending'); |
|||
const status = ref('PENDING'); |
|||
|
|||
// 设置 设置状态 |
|||
function setStatus(event) { |
|||
status.value = event; |
|||
} |
|||
</script> |
|||
|
Loading…
Reference in new issue