parent
8da55c377e
commit
832bf3bf66
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 7.8 KiB |
@ -0,0 +1,118 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-card shadow="never"> |
||||
<template #header> |
||||
<div style="display: flex; align-items: center"> |
||||
<el-icon><Loading /></el-icon> <span |
||||
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||
>设备监控</span |
||||
> |
||||
</div> |
||||
</template> |
||||
<el-form |
||||
ref="monitorFormRef" |
||||
:model="formData" |
||||
:rules="rules" |
||||
v-loading="loading" |
||||
> |
||||
<el-descriptions :column="2" border> |
||||
<el-descriptions-item |
||||
label=" 监控时长:(秒)" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item style="margin-bottom: 0" prop="monitorPeriod"> |
||||
<el-input |
||||
v-model="formData.monitorPeriod" |
||||
placeholder="请输入监控时长" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label=" 采样周期:(秒)" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item style="margin-bottom: 0" prop="monitorInterval"> |
||||
<el-input |
||||
v-model="formData.monitorInterval" |
||||
placeholder="请输入采样周期" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
</el-form> |
||||
<template #footer> |
||||
<div class="flex justify-end"> |
||||
<el-button type="primary" @click="submitForm(monitorFormRef)" |
||||
>确定</el-button |
||||
> |
||||
<el-button @click="resetForm(monitorFormRef)">重置</el-button> |
||||
</div> |
||||
</template> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { DeviceMonitorForm } from "@/api/remote/types"; |
||||
import { FormInstance, FormRules } from "element-plus"; |
||||
import { remoteDeviceMonitor } from "@/api/remote"; |
||||
const route = useRoute(); |
||||
let devId: number = parseInt(<string>route.params.devId); |
||||
const formData = ref<DeviceMonitorForm>({ |
||||
devId: devId, |
||||
}); |
||||
const loading = ref<boolean>(false); |
||||
const monitorFormRef = ref<FormInstance>(); |
||||
const rules = reactive<FormRules<DeviceMonitorForm>>({ |
||||
monitorInterval: [ |
||||
{ required: true, message: "请输入采样周期", trigger: "blur" }, |
||||
], |
||||
monitorPeriod: [ |
||||
{ required: true, message: "请输入监控时长", trigger: "blur" }, |
||||
], |
||||
}); |
||||
const resetForm = (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return; |
||||
formEl.resetFields(); |
||||
}; |
||||
const submitForm = async (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return; |
||||
await formEl.validate((valid, fields) => { |
||||
if (valid) { |
||||
loading.value = true; |
||||
remoteDeviceMonitor(formData.value) |
||||
.then(() => { |
||||
ElMessage({ |
||||
message: "操作成功", |
||||
type: "success", |
||||
duration: 1000, |
||||
}); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
} else { |
||||
console.log("error submit!", fields); |
||||
} |
||||
}); |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
:deep(.my-label) { |
||||
width: 40px !important; |
||||
text-align: center !important; |
||||
background: var(--el-color-white) !important; |
||||
} |
||||
:deep(.el-card__body) { |
||||
padding: 10px 0 10px 0; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,183 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-card shadow="never"> |
||||
<template #header> |
||||
<div style="display: flex; align-items: center"> |
||||
<el-icon><Loading /></el-icon> <span |
||||
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||
>设备测速</span |
||||
> |
||||
</div> |
||||
</template> |
||||
<el-descriptions :column="2" border> |
||||
<el-descriptions-item |
||||
label="历史最佳速率" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ speedMaxRate }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="上网方式" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<div v-loading="connTypeLoading"> |
||||
{{ connType }} |
||||
</div> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="宽带账号" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ pppoe }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="测速服务器" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-select |
||||
v-model="downloadUrl" |
||||
placeholder="请选择测速服务器" |
||||
style="width: 100%" |
||||
> |
||||
<el-option |
||||
v-for="(item, index) in options" |
||||
:key="index" |
||||
:label="item" |
||||
:value="item" |
||||
/> |
||||
</el-select> |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
</el-card> |
||||
<el-card shadow="never"> |
||||
<template #header> |
||||
<div class="flex justify-between"> |
||||
<div style="display: flex; align-items: center"> |
||||
<el-icon><Loading /></el-icon> <span |
||||
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||
>设备测速进度及结果</span |
||||
> |
||||
</div> |
||||
<div> |
||||
<el-button |
||||
:disabled="loading" |
||||
@click="loadTr143Speed" |
||||
type="primary" |
||||
>开始测速</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<div v-loading="loading"> |
||||
<el-empty |
||||
v-if="result?.resultState != '2'" |
||||
:description="result?.resultCode" |
||||
/> |
||||
<div class="flex justify-center"> |
||||
<el-progress |
||||
type="dashboard" |
||||
:width="200" |
||||
v-if="result?.resultState === '2'" |
||||
color="#00C3EE" |
||||
:percentage="parseFloat(result?.resultCode)" |
||||
> |
||||
<template #default="{ percentage }"> |
||||
<span class="percentage-value">{{ percentage }}</span> |
||||
<span class="percentage-label">Mbit/s</span> |
||||
</template> |
||||
</el-progress> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { Loading } from "@element-plus/icons-vue"; |
||||
import { getSpeedInfo, remoteCheckConnType, tr143Speed } from "@/api/remote"; |
||||
import { RemoteOperateResult } from "@/api/remote/types"; |
||||
|
||||
const route = useRoute(); |
||||
let devId: number = parseInt(<string>route.params.devId); |
||||
let pppoe: string = <string>route.params?.pppoe; |
||||
const options = ref<string[]>([]); |
||||
const downloadUrl = ref<string>(""); |
||||
const speedMaxRate = ref<string>(""); |
||||
const connType = ref<string>(""); |
||||
const connTypeLoading = ref<boolean>(false); |
||||
const result = ref<RemoteOperateResult>({ |
||||
resultState: "10", |
||||
resultCode: "暂无结果", |
||||
}); |
||||
const loading = ref<boolean>(false); |
||||
const loadSpeedInfo = () => { |
||||
getSpeedInfo(devId).then(({ data }) => { |
||||
options.value = data.downloadUrls; |
||||
speedMaxRate.value = data.speedMaxRate; |
||||
if (data.downloadUrls.length != 0) { |
||||
downloadUrl.value = data.downloadUrls[0]; |
||||
} |
||||
}); |
||||
}; |
||||
const loadConnType = () => { |
||||
connTypeLoading.value = true; |
||||
remoteCheckConnType(devId) |
||||
.then(({ data }) => { |
||||
connType.value = data; |
||||
}) |
||||
.finally(() => { |
||||
connTypeLoading.value = false; |
||||
}); |
||||
}; |
||||
const loadTr143Speed = () => { |
||||
loading.value = true; |
||||
tr143Speed(devId, downloadUrl.value) |
||||
.then(({ data }) => { |
||||
result.value = data; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
onMounted(() => { |
||||
loadSpeedInfo(); |
||||
loadConnType(); |
||||
}); |
||||
</script> |
||||
|
||||
<style scoped> |
||||
:deep(.my-label) { |
||||
width: 50px !important; |
||||
text-align: center !important; |
||||
background: var(--el-color-white) !important; |
||||
} |
||||
:deep(.el-card__body) { |
||||
padding: 10px 0 0 0; |
||||
} |
||||
.percentage-value { |
||||
display: block; |
||||
margin-top: 10px; |
||||
font-size: 28px; |
||||
} |
||||
.percentage-label { |
||||
display: block; |
||||
margin-top: 10px; |
||||
font-size: 20px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,142 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-card shadow="never"> |
||||
<template #header> |
||||
<div style="display: flex; align-items: center"> |
||||
<el-icon><Loading /></el-icon> <span |
||||
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||
>PING测试</span |
||||
> |
||||
</div> |
||||
</template> |
||||
<el-form |
||||
ref="pingFormRef" |
||||
:model="formData" |
||||
v-loading="loading" |
||||
:rules="rules" |
||||
> |
||||
<el-descriptions :column="2" border> |
||||
<el-descriptions-item |
||||
label="主机" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="host" style="margin-bottom: 0"> |
||||
<el-input v-model="formData.host" placeholder="请输入主机" /> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="重复次数" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="pingNumber" style="margin-bottom: 0"> |
||||
<el-input |
||||
v-model="formData.pingNumber" |
||||
placeholder="请输入重复次数" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="包大小" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="packSize" style="margin-bottom: 0"> |
||||
<el-input |
||||
v-model="formData.packSize" |
||||
placeholder="请输入包大小" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="接口" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="pingInterface" style="margin-bottom: 0"> |
||||
<dictionary |
||||
type-code="ping_interface" |
||||
placeholder="请选择接口类型" |
||||
v-model="formData.pingInterface" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
</el-form> |
||||
<template #footer> |
||||
<div class="flex justify-end"> |
||||
<el-button type="primary" @click="submitForm(pingFormRef)" |
||||
>确认</el-button |
||||
> |
||||
<el-button @click="resetForm(pingFormRef)">重置</el-button> |
||||
</div> |
||||
</template> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { PingForm } from "@/api/remote/types"; |
||||
import { FormInstance, FormRules } from "element-plus"; |
||||
import { remoteIpPing } from "@/api/remote"; |
||||
const route = useRoute(); |
||||
let devId: number = parseInt(<string>route.params.devId); |
||||
const pingFormRef = ref<FormInstance>(); |
||||
const loading = ref<boolean>(false); |
||||
const formData = ref<PingForm>({ deviceId: devId }); |
||||
const rules = reactive<FormRules<PingForm>>({ |
||||
host: [{ required: true, message: "请输入主机", trigger: "blur" }], |
||||
pingNumber: [{ required: true, message: "请输入重复次数", trigger: "blur" }], |
||||
packSize: [{ required: true, message: "请输入包大小", trigger: "blur" }], |
||||
pingInterface: [{ required: true, message: "请选择接口", trigger: "blur" }], |
||||
}); |
||||
const resetForm = (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return; |
||||
formEl.resetFields(); |
||||
}; |
||||
const submitForm = async (formEl: FormInstance | undefined) => { |
||||
if (!formEl) return; |
||||
await formEl.validate((valid, fields) => { |
||||
if (valid) { |
||||
loading.value = true; |
||||
remoteIpPing(formData.value) |
||||
.then(() => { |
||||
ElMessage({ |
||||
message: "操作成功", |
||||
duration: 1000, |
||||
type: "success", |
||||
}); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
} else { |
||||
console.log("error submit!", fields); |
||||
} |
||||
}); |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
:deep(.my-label) { |
||||
width: 40px !important; |
||||
text-align: center !important; |
||||
background: var(--el-color-white) !important; |
||||
} |
||||
:deep(.el-card__body) { |
||||
padding: 10px 0 10px 0; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,109 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-card shadow="never"> |
||||
<template #header> |
||||
<div style="display: flex; justify-content: space-between"> |
||||
<div style="display: flex; align-items: center"> |
||||
<el-icon size="15"><Grid /></el-icon> <span |
||||
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||
>设备软件版本升级--软件版本列表</span |
||||
> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<div class="any-table"> |
||||
<el-table |
||||
:data="tableData" |
||||
v-loading="loading" |
||||
max-height="450" |
||||
highlight-current-row |
||||
@row-click="handleCurrentChange" |
||||
> |
||||
<el-table-column width="55"> |
||||
<template #default="scope"> |
||||
<el-radio :label="scope.row.fileId" v-model="fileId"> |
||||
{{ "" }} |
||||
</el-radio> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
width="200" |
||||
label="版本名称" |
||||
align="center" |
||||
prop="softVer" |
||||
/> |
||||
<el-table-column |
||||
label="版本描述" |
||||
align="center" |
||||
prop="devTypeVerDesc" |
||||
/> |
||||
</el-table> |
||||
</div> |
||||
<template #footer> |
||||
<div class="flex justify-end"> |
||||
<el-button type="primary" :disabled="loading" @click="submit" |
||||
>确定</el-button |
||||
> |
||||
</div> |
||||
</template> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { Grid } from "@element-plus/icons-vue"; |
||||
import { SoftVersionUpgradeVO } from "@/api/device-type-ver/types"; |
||||
import { ElTable } from "element-plus"; |
||||
import { upgradeSoftVerTable } from "@/api/device-type-ver"; |
||||
import { remoteSoftVerUpgrade } from "@/api/remote"; |
||||
|
||||
const route = useRoute(); |
||||
let devId: number = parseInt(<string>route.params.devId); |
||||
const fileId = ref<number>(); |
||||
const tableData = ref<SoftVersionUpgradeVO[]>([]); |
||||
const loading = ref<boolean>(false); |
||||
const handleCurrentChange = (val: SoftVersionUpgradeVO) => { |
||||
fileId.value = val.fileId; |
||||
}; |
||||
const loadData = () => { |
||||
loading.value = true; |
||||
upgradeSoftVerTable(devId) |
||||
.then(({ data }) => { |
||||
tableData.value = data; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
const submit = () => { |
||||
if (fileId.value === undefined) { |
||||
ElMessage({ |
||||
message: "请选择一个软件版本", |
||||
duration: 1000, |
||||
type: "success", |
||||
}); |
||||
return; |
||||
} |
||||
loading.value = true; |
||||
remoteSoftVerUpgrade(devId, fileId.value) |
||||
.then(() => { |
||||
ElMessage({ |
||||
message: "操作成功", |
||||
type: "success", |
||||
duration: 1000, |
||||
}); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
onMounted(() => { |
||||
loadData(); |
||||
}); |
||||
</script> |
||||
|
||||
<style scoped> |
||||
:deep(.el-card__body) { |
||||
padding: 10px 0 0 0; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,76 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-card> |
||||
<template #header> |
||||
<div class="head-parent-right"> |
||||
<el-button :icon="Refresh" type="primary" @click="getData">刷新</el-button> |
||||
</div> |
||||
</template> |
||||
<div class="any-table"> |
||||
<el-table :data="tableData" v-loading="loading" max-height="500"> |
||||
<el-table-column label="任务编号" prop="operTaskId" align="center"> |
||||
<template #default="scope"> |
||||
<el-button type="primary" link |
||||
>{{ scope.row.operTaskId }} |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="AD编号" prop="devAdNo" align="center" /> |
||||
<el-table-column |
||||
label="任务描述" |
||||
prop="operTaskDesc" |
||||
align="center" |
||||
/> |
||||
<el-table-column label="操作者" prop="userName" align="center" /> |
||||
<el-table-column |
||||
label="创建时间" |
||||
prop="operTaskCreateTime" |
||||
align="center" |
||||
/> |
||||
<el-table-column label="结果" prop="resultState" align="center" /> |
||||
</el-table> |
||||
</div> |
||||
<pagination |
||||
v-if="total > 0" |
||||
v-model:total="total" |
||||
v-model:page="queryForm.pageNum" |
||||
v-model:limit="queryForm.pageSize" |
||||
@pagination="getData" |
||||
/> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { OperateTask2TableVO } from "@/api/operate-task2/types"; |
||||
import { operateTask2Page, taskTablePage } from "@/api/operate-task2"; |
||||
import { Refresh } from "@element-plus/icons-vue"; |
||||
defineOptions({ |
||||
name: "Task", |
||||
inheritAttrs: false, |
||||
}); |
||||
const tableData = ref<OperateTask2TableVO[]>([]); |
||||
const total = ref<number>(0); |
||||
const queryForm = ref<PageQuery>({ pageNum: 1, pageSize: 10 }); |
||||
const loading = ref<boolean>(false); |
||||
const getData = () => { |
||||
loading.value = true; |
||||
taskTablePage(queryForm.value) |
||||
.then(({ data }) => { |
||||
tableData.value = data.list; |
||||
total.value = data.total; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
onMounted(() => { |
||||
getData(); |
||||
}); |
||||
</script> |
||||
|
||||
<style scoped> |
||||
:deep(.el-card__body) { |
||||
padding: 10px 0 0 0; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue