xiaolin.li
/
bellmann-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 故障管理

Browse Source
master
李小林 6 months ago
parent 12f8a46157
commit 98ed3168be
7 changed files with 1158 additions and 8 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      src/api/remote/index.ts
  2. 48
      src/views/family/operate/fault-management/components/FaultApplication.vue
  3. 87
      src/views/family/operate/fault-management/components/FaultDiagnosisUtil.vue
  4. 127
      src/views/family/operate/fault-management/components/IptvIsNotAvailable.vue
  5. 279
      src/views/family/operate/fault-management/components/UserExceptDisconnected.vue
  6. 543
      src/views/family/operate/fault-management/components/WirelessIsNotAvailable.vue
  7. 80
      src/views/family/operate/remote-operation/components/Ping.vue

2
src/api/remote/index.ts
Unescape View File

@ -87,7 +87,7 @@ export function remoteFTTRSubGateway(devId: number) {
});
}
export function remoteIpPing(data: PingForm) {
export function remoteIpPing(data: PingForm): AxiosPromise<any> {
return request({
url: `/api/equipment/v1/remote/ip-ping`,
method: "POST",

48
src/views/family/operate/fault-management/components/FaultApplication.vue
Unescape View File

@ -9,12 +9,58 @@
</template>
<wired-is-not-available :dev-id="prop.devId" />
</el-tab-pane>
<el-tab-pane>
<template #label>
<span class="custom-tabs-label">
<el-icon><PartlyCloudy /></el-icon>
<span>无线无法上网</span>
</span>
</template>
<wireless-is-not-available :dev-id="prop.devId" />
</el-tab-pane>
<el-tab-pane>
<template #label>
<span class="custom-tabs-label">
<el-icon><Sunset /></el-icon>
<span>IPTV无法使用</span>
</span>
</template>
<iptv-is-not-available :dev-id="prop.devId" />
</el-tab-pane>
<el-tab-pane>
<template #label>
<span class="custom-tabs-label">
<el-icon><Pouring /></el-icon>
<span>上网速度慢/用户异常掉线</span>
</span>
</template>
<user-except-disconnected :dev-id="prop.devId" />
</el-tab-pane>
<el-tab-pane>
<template #label>
<span class="custom-tabs-label">
<el-icon><Lightning /></el-icon>
<span>故障诊断工具</span>
</span>
</template>
<fault-diagnosis-util :dev-id="prop.devId" />
</el-tab-pane>
</el-tabs>
</template>
<script setup lang="ts">
import { MostlyCloudy } from "@element-plus/icons-vue";
import {
Lightning,
MostlyCloudy,
PartlyCloudy,
Pouring,
Sunset,
} from "@element-plus/icons-vue";
import WiredIsNotAvailable from "@/views/family/operate/fault-management/components/WiredIsNotAvailable.vue";
import WirelessIsNotAvailable from "@/views/family/operate/fault-management/components/WirelessIsNotAvailable.vue";
import IptvIsNotAvailable from "@/views/family/operate/fault-management/components/IptvIsNotAvailable.vue";
import UserExceptDisconnected from "@/views/family/operate/fault-management/components/UserExceptDisconnected.vue";
import FaultDiagnosisUtil from "@/views/family/operate/fault-management/components/FaultDiagnosisUtil.vue";
const prop = defineProps<{
devId: number;

87
src/views/family/operate/fault-management/components/FaultDiagnosisUtil.vue
Unescape View File

@ -0,0 +1,87 @@
<template>
<div>
<el-descriptions :column="1" border v-loading="loading">
<el-descriptions-item
label="其他操作"
label-align="left"
align="center"
label-class-name="my-label2"
class-name="my-content"
width="150px"
>
<div class="flex justify-center" v-if="prop.devId != 0">
<el-button type="primary" @click="openPing" link>PING测试</el-button>
<el-button type="primary" @click="reboot" link>远程重启</el-button>
<el-button type="primary" @click="factoryReset" link
>恢复出厂配置</el-button
>
<el-button type="primary" @click="skipSoapPackageLog" link
>获取TR069码流分析日志</el-button
>
</div>
<div v-else>请先选择设备</div>
</el-descriptions-item>
</el-descriptions>
</div>
</template>
<script setup lang="ts">
import { confirm } from "@/utils/confirm";
import { remoteFactoryReset, remoteReboot } from "@/api/remote";
const prop = defineProps<{
devId: number;
}>();
const router = useRouter();
const loading = ref<boolean>(false);
const openPing = () => {
router.push({
path: `/resources/remote/ping/${prop.devId}`,
});
};
const reboot = () => {
confirm("确认重启设备吗", () => {
loading.value = true;
remoteReboot(prop.devId)
.then(() => {
ElMessage({
message: "操作成功",
duration: 1000,
type: "success",
});
})
.finally(() => {
loading.value = false;
});
});
};
const factoryReset = () => {
confirm("确认恢复出厂设置吗", () => {
loading.value = true;
remoteFactoryReset(prop.devId)
.then(() => {
ElMessage({
message: "操作成功",
duration: 1000,
type: "success",
});
})
.finally(() => {
loading.value = false;
});
});
};
const skipSoapPackageLog = () => {
router.push({
path: `/resources/remote-info/soap-package-log/${prop.devId}`,
});
};
</script>
<style scoped>
:deep(.my-label2) {
width: 0 !important;
display: none !important;
background: var(--el-color-white) !important;
}
</style>

127
src/views/family/operate/fault-management/components/IptvIsNotAvailable.vue
Unescape View File

@ -0,0 +1,127 @@
<template>
<div>
<div class="flex justify-end">
<el-button
type="primary"
:disabled="prop.devId === 0"
@click="startDiagnosis"
>开始诊断</el-button
>
</div>
<el-scrollbar height="350">
<el-descriptions
v-loading="loading"
direction="vertical"
border
:column="4"
>
<template #title>
<div style="display: flex; align-items: center; margin-top: 10px">
<el-icon size="15"> <Grid /> </el-icon>&nbsp;<span
style="font-weight: 500; font-size: 14px; line-height: 16px"
>IPTV是否正常使用</span
>
</div>
</template>
<el-descriptions-item
label="PVC/VLAN配置"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ iptv["PVC"] }}
</el-descriptions-item>
<el-descriptions-item
label="连接类型"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ iptv["ConnectType"] }}
</el-descriptions-item>
<el-descriptions-item
label="连接状态"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>{{ iptv["ConnectStatus"] }}
</el-descriptions-item>
<el-descriptions-item
label="LAN口"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ iptv["BIND_LAN"] }}
</el-descriptions-item>
<el-descriptions-item
label-align="center"
align="left"
label-class-name="my-label-none"
class-name="my-content"
width="150px"
v-if="iptv['state'] != '2' && iptv['state'] != undefined"
>
<div style="color: red; padding: 0 8px; font-size: 10px">
错误信息：{{ iptv["result"] }}
</div>
</el-descriptions-item>
</el-descriptions>
</el-scrollbar>
</div>
</template>
<script setup lang="ts">
import { Grid } from "@element-plus/icons-vue";
import { faultServiceStatus, pingDNSResult } from "@/api/fault";
const prop = defineProps<{
devId: number;
}>();
const iptv = ref<any>({});
const loading = ref<boolean>(false);
const getServiceDetailInfo = (remote: string) => {
loading.value = true;
faultServiceStatus(prop.devId, remote)
.then(({ data }) => {
switch (remote) {
case "IptvQueryDSL":
iptv.value = data;
break;
}
})
.finally(() => {
loading.value = false;
});
};
const startDiagnosis = async () => {
await getServiceDetailInfo("IptvQueryDSL");
};
</script>
<style scoped>
:deep(.my-content) {
height: 32px;
}
:deep(.my-label-none) {
display: none;
}
:deep(
.el-descriptions__body
.el-descriptions__table.is-bordered
.el-descriptions__cell
) {
padding: 8px 0;
}
</style>

279
src/views/family/operate/fault-management/components/UserExceptDisconnected.vue
Unescape View File

@ -0,0 +1,279 @@
<template>
<div>
<div class="flex justify-end">
<el-button
type="primary"
:disabled="prop.devId === 0"
@click="startDiagnosis"
>开始诊断</el-button
>
</div>
<el-scrollbar height="350">
<el-descriptions
v-loading="loading"
direction="vertical"
border
:column="8"
>
<template #title>
<div style="display: flex; align-items: center; margin-top: 10px">
<el-icon size="15"> <Grid /> </el-icon>&nbsp;<span
style="font-weight: 500; font-size: 14px; line-height: 16px"
>链路信息</span
>
</div>
</template>
<el-descriptions-item
label="链路状态"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ link["Status"] }}
</el-descriptions-item>
<el-descriptions-item
label="线路协议"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ link["ModulationType"] }}
</el-descriptions-item>
<el-descriptions-item
label="上行速率（Kbps）"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>{{ link["UpstreamMaxRate"] }}
</el-descriptions-item>
<el-descriptions-item
label="下行速率（Kbps）"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ link["DownstreamMaxRate"] }}
</el-descriptions-item>
<el-descriptions-item
label="上行衰减（0.1dB）"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ link["UpstreamAttenuation"] }}
</el-descriptions-item>
<el-descriptions-item
label="下行衰减（0.dB）"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ link["DownstreamAttenuation"] }}
</el-descriptions-item>
<el-descriptions-item
label="上行性噪比（0.dB）"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ link["UpstreamNoiseMargin"] }}
</el-descriptions-item>
<el-descriptions-item
label="下行性噪比（0.dB）"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ link["DownstreamNoiseMargin"] }}
</el-descriptions-item>
<el-descriptions-item
label-align="center"
align="left"
label-class-name="my-label-none"
class-name="my-content"
width="150px"
v-if="link['state'] != '2' && link['state'] != undefined"
>
<div style="color: red; padding: 0 8px; font-size: 10px">
错误信息：{{ link["result"] }}
</div>
</el-descriptions-item>
</el-descriptions>
<el-descriptions
v-loading="loadingPing"
direction="vertical"
border
:column="7"
>
<template #title>
<div style="display: flex; align-items: center; margin-top: 10px">
<el-icon size="15"> <Grid /> </el-icon>&nbsp;<span
style="font-weight: 500; font-size: 14px; line-height: 16px"
>PING一个特定IP地址</span
>
</div>
</template>
<el-descriptions-item
label="目的IP"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ pingDNS["IP"] }}
</el-descriptions-item>
<el-descriptions-item
label="包大小"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ pingDNS["PackSize"] }}
</el-descriptions-item>
<el-descriptions-item
label="次数"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>{{ pingDNS["Number"] }}
</el-descriptions-item>
<el-descriptions-item
label="PING结果"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
<span v-if="pingDNS['SuccessCount'] != undefined">
成功次数 {{ pingDNS["SuccessCount"] }}，失败次数
{{ pingDNS["FailureCount"] }}
</span>
</el-descriptions-item>
<el-descriptions-item
label="最小响应时间"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ pingDNS["MinimumResponseTime"] }}
</el-descriptions-item>
<el-descriptions-item
label="最大响应时间"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ pingDNS["MaximumResponseTime"] }}
</el-descriptions-item>
<el-descriptions-item
label="平均响应时间"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ pingDNS["AverageResponseTime"] }}
</el-descriptions-item>
<el-descriptions-item
label-align="center"
align="left"
label-class-name="my-label-none"
class-name="my-content"
width="150px"
v-if="pingDNS['state'] != '2' && pingDNS['state'] != undefined"
>
<div style="color: red; padding: 0 8px; font-size: 10px">
错误信息：{{ pingDNS["result"] }}
</div>
</el-descriptions-item>
</el-descriptions>
</el-scrollbar>
</div>
</template>
<script setup lang="ts">
import { Grid } from "@element-plus/icons-vue";
import { faultServiceStatus, pingDNSResult } from "@/api/fault";
const prop = defineProps<{
devId: number;
}>();
const link = ref<any>({});
const pingDNS = ref<any>({});
const loading = ref<boolean>(false);
const loadingPing = ref<boolean>(false);
const getServiceDetailInfo = (remote: string) => {
loading.value = true;
faultServiceStatus(prop.devId, remote)
.then(({ data }) => {
switch (remote) {
case "LinkInfoQueryDSL":
link.value = data;
break;
}
})
.finally(() => {
loading.value = false;
});
};
const getPingResult = (remote: string) => {
loadingPing.value = true;
pingDNSResult(prop.devId, remote)
.then(({ data }) => {
pingDNS.value = data;
})
.finally(() => {
loadingPing.value = false;
});
};
const startDiagnosis = async () => {
await getServiceDetailInfo("LinkInfoQueryDSL");
await getPingResult("ipping");
};
</script>
<style scoped>
:deep(.my-content) {
height: 32px;
}
:deep(.my-label-none) {
display: none;
}
:deep(
.el-descriptions__body
.el-descriptions__table.is-bordered
.el-descriptions__cell
) {
padding: 8px 0;
}
</style>

543
src/views/family/operate/fault-management/components/WirelessIsNotAvailable.vue
Unescape View File

@ -0,0 +1,543 @@
<template>
<div>
<div class="flex justify-end">
<el-button
type="primary"
:disabled="prop.devId === 0"
@click="startDiagnosis"
>开始诊断</el-button
>
</div>
<el-scrollbar height="350">
<el-descriptions
v-loading="loading"
direction="vertical"
border
:column="1"
>
<template #title>
<div style="display: flex; align-items: center; margin-top: 10px">
<el-icon size="15"> <Grid /> </el-icon>&nbsp;<span
style="font-weight: 500; font-size: 14px; line-height: 16px"
>无线SSID检查</span
>
</div>
</template>
<el-descriptions-item
label="是否开启无线SSID"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ getEnableSSID(wlan["Status"]) }}
</el-descriptions-item>
<el-descriptions-item
label-align="center"
align="left"
label-class-name="my-label-none"
class-name="my-content"
width="150px"
v-if="wlan['state'] != '2' && wlan['state'] != undefined"
>
<div style="color: red; padding: 0 8px; font-size: 10px">
错误信息：{{ wlan["result"] }}
</div>
</el-descriptions-item>
</el-descriptions>
<el-descriptions
v-loading="loading"
direction="vertical"
border
:column="8"
>
<template #title>
<div style="display: flex; align-items: center; margin-top: 10px">
<el-icon size="15"> <Grid /> </el-icon>&nbsp;<span
style="font-weight: 500; font-size: 14px; line-height: 16px"
>链路信息</span
>
</div>
</template>
<el-descriptions-item
label="链路状态"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ link["Status"] }}
</el-descriptions-item>
<el-descriptions-item
label="线路协议"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ link["ModulationType"] }}
</el-descriptions-item>
<el-descriptions-item
label="上行速率（Kbps）"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>{{ link["UpstreamMaxRate"] }}
</el-descriptions-item>
<el-descriptions-item
label="下行速率（Kbps）"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ link["DownstreamMaxRate"] }}
</el-descriptions-item>
<el-descriptions-item
label="上行衰减（0.1dB）"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ link["UpstreamAttenuation"] }}
</el-descriptions-item>
<el-descriptions-item
label="下行衰减（0.dB）"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ link["DownstreamAttenuation"] }}
</el-descriptions-item>
<el-descriptions-item
label="上行性噪比（0.dB）"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ link["UpstreamNoiseMargin"] }}
</el-descriptions-item>
<el-descriptions-item
label="下行性噪比（0.dB）"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ link["DownstreamNoiseMargin"] }}
</el-descriptions-item>
<el-descriptions-item
label-align="center"
align="left"
label-class-name="my-label-none"
class-name="my-content"
width="150px"
v-if="link['state'] != '2' && link['state'] != undefined"
>
<div style="color: red; padding: 0 8px; font-size: 10px">
错误信息：{{ link["result"] }}
</div>
</el-descriptions-item>
</el-descriptions>
<el-descriptions
v-loading="loading"
direction="vertical"
border
:column="4"
>
<template #title>
<div style="display: flex; align-items: center; margin-top: 10px">
<el-icon size="15"> <Grid /> </el-icon>&nbsp;<span
style="font-weight: 500; font-size: 14px; line-height: 16px"
>业务参数检查</span
>
</div>
</template>
<el-descriptions-item
label="PVC/VLAN配置"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ broadband["PVC"] }}
</el-descriptions-item>
<el-descriptions-item
label="宽带账号"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ broadband["Username"] }}
</el-descriptions-item>
<el-descriptions-item
label="NAT"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>{{ broadband["NAT"] }}
</el-descriptions-item>
<el-descriptions-item
label="DNS"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ broadband["DNSServer"] }}
</el-descriptions-item>
<el-descriptions-item
label-align="center"
align="left"
label-class-name="my-label-none"
class-name="my-content"
width="150px"
v-if="broadband['state'] != '2' && broadband['state'] != undefined"
>
<div style="color: red; padding: 0 8px; font-size: 10px">
错误信息：{{ broadband["result"] }}
</div>
</el-descriptions-item>
</el-descriptions>
<el-descriptions
v-loading="loading"
direction="vertical"
border
:column="2"
>
<template #title>
<div style="display: flex; align-items: center; margin-top: 10px">
<el-icon size="15"> <Grid /> </el-icon>&nbsp;<span
style="font-weight: 500; font-size: 14px; line-height: 16px"
>拨号检查</span
>
</div>
</template>
<el-descriptions-item
label="拨号方式"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ broadband["ConnectType"] }}
</el-descriptions-item>
<el-descriptions-item
label="宽带账号"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ broadband["ConnectStatus"] }}
</el-descriptions-item>
<el-descriptions-item
label-align="center"
align="left"
label-class-name="my-label-none"
class-name="my-content"
width="150px"
v-if="broadband['state'] != '2' && broadband['state'] != undefined"
>
<div style="color: red; padding: 0 8px; font-size: 10px">
错误信息：{{ broadband["result"] }}
</div>
</el-descriptions-item>
</el-descriptions>
<el-descriptions
v-loading="loadingPing"
direction="vertical"
border
:column="7"
>
<template #title>
<div style="display: flex; align-items: center; margin-top: 10px">
<el-icon size="15"> <Grid /> </el-icon>&nbsp;<span
style="font-weight: 500; font-size: 14px; line-height: 16px"
>PING一个DNS的IP地址</span
>
</div>
</template>
<el-descriptions-item
label="目的IP"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ pingDNS["IP"] }}
</el-descriptions-item>
<el-descriptions-item
label="包大小"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ pingDNS["PackSize"] }}
</el-descriptions-item>
<el-descriptions-item
label="次数"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>{{ pingDNS["Number"] }}
</el-descriptions-item>
<el-descriptions-item
label="PING结果"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
<span v-if="pingDNS['SuccessCount'] != undefined">
成功次数 {{ pingDNS["SuccessCount"] }}，失败次数
{{ pingDNS["FailureCount"] }}
</span>
</el-descriptions-item>
<el-descriptions-item
label="最小响应时间"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ pingDNS["MinimumResponseTime"] }}
</el-descriptions-item>
<el-descriptions-item
label="最大响应时间"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ pingDNS["MaximumResponseTime"] }}
</el-descriptions-item>
<el-descriptions-item
label="平均响应时间"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ pingDNS["AverageResponseTime"] }}
</el-descriptions-item>
<el-descriptions-item
label-align="center"
align="left"
label-class-name="my-label-none"
class-name="my-content"
width="150px"
v-if="pingDNS['state'] != '2' && pingDNS['state'] != undefined"
>
<div style="color: red; padding: 0 8px; font-size: 10px">
错误信息：{{ pingDNS["result"] }}
</div>
</el-descriptions-item>
</el-descriptions>
<el-descriptions
v-loading="loading"
direction="vertical"
border
:column="4"
>
<template #title>
<div style="display: flex; align-items: center; margin-top: 10px">
<el-icon size="15"> <Grid /> </el-icon>&nbsp;<span
style="font-weight: 500; font-size: 14px; line-height: 16px"
>无线SSID连接检查</span
>
</div>
</template>
<el-descriptions-item
label="SSID1"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ getSSIDStatus[0] }}
</el-descriptions-item>
<el-descriptions-item
label="SSID2"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ getSSIDStatus[1] }}
</el-descriptions-item>
<el-descriptions-item
label="SSID3"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ getSSIDStatus[2] }}
</el-descriptions-item>
<el-descriptions-item
label="SSID4"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ getSSIDStatus[3] }}
</el-descriptions-item>
<el-descriptions-item
label-align="center"
align="left"
label-class-name="my-label-none"
class-name="my-content"
width="150px"
v-if="wlan['state'] != '2' && wlan['state'] != undefined"
>
<div style="color: red; padding: 0 8px; font-size: 10px">
错误信息：{{ wlan["result"] }}
</div>
</el-descriptions-item>
</el-descriptions>
</el-scrollbar>
</div>
</template>
<script setup lang="ts">
import { Grid } from "@element-plus/icons-vue";
import { faultServiceStatus, pingDNSResult } from "@/api/fault";
const prop = defineProps<{
devId: number;
}>();
const link = ref<any>({});
const broadband = ref<any>({});
const pingDNS = ref<any>({});
const wlan = ref<any>({});
const loading = ref<boolean>(false);
const loadingPing = ref<boolean>(false);
const getEnableSSID = (str?: string) => {
if (str) {
let tempStatus: string[] = str.split(":");
let flag = false;
for (let i = 0; i < tempStatus.length; i++) {
if (tempStatus[i] === "1") {
flag = true;
}
}
if (flag) {
return "无线SSID已开启";
} else {
return "无线SSID均未开启，请先开启";
}
}
};
// eslint-disable-next-line vue/return-in-computed-property
const getSSIDStatus = computed(() => {
let ssid: string = wlan.value["SSID"];
let status: string = wlan.value["Status"];
let arr: string[] = ["", "", "", ""];
if (ssid != undefined && status != undefined) {
let tempSSID: string[] = ssid.split(":");
let tempStatus: string[] = status.split(":");
for (let i = 0; i < tempStatus.length; i++) {
if (tempStatus[i] === "1") {
tempStatus[i] = "已连接";
} else {
tempStatus[i] = "未连接";
}
}
for (let j = 0; j < tempSSID.length; j++) {
arr[j] = `${tempSSID[j]}(${tempStatus[j]})`;
}
}
return arr;
});
const getServiceDetailInfo = (remote: string) => {
loading.value = true;
faultServiceStatus(prop.devId, remote)
.then(({ data }) => {
switch (remote) {
case "LinkInfoQueryDSL":
link.value = data;
break;
case "DigitalhomeQueryDSL":
broadband.value = data;
break;
case "WLanInfoQuery":
wlan.value = data;
break;
}
})
.finally(() => {
loading.value = false;
});
};
const getPingResult = (remote: string) => {
loadingPing.value = true;
pingDNSResult(prop.devId, remote)
.then(({ data }) => {
pingDNS.value = data;
})
.finally(() => {
loadingPing.value = false;
});
};
const startDiagnosis = async () => {
await getServiceDetailInfo("WLanInfoQuery");
await getServiceDetailInfo("LinkInfoQueryDSL");
await getServiceDetailInfo("DigitalhomeQueryDSL");
await getPingResult("ipping");
};
</script>
<style scoped>
:deep(.my-content) {
height: 32px;
}
:deep(.my-label-none) {
display: none;
}
:deep(
.el-descriptions__body
.el-descriptions__table.is-bordered
.el-descriptions__cell
) {
padding: 8px 0;
}
</style>

80
src/views/family/operate/remote-operation/components/Ping.vue
Unescape View File

@ -85,6 +85,73 @@
</div>
</template>
</el-card>
<el-card shadow="never" class="mt-1">
<template #header>
<div style="display: flex; align-items: center">
<el-icon><Loading /></el-icon>&nbsp;<span
style="font-weight: 700; font-size: 14px; line-height: 16px"
>PING测试结果</span
>
</div>
</template>
<el-descriptions
v-loading="loading"
direction="vertical"
border
:column="5"
>
<el-descriptions-item
label="成功次数"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ pingResult["SuccessCount"] }}
</el-descriptions-item>
<el-descriptions-item
label="失败次数"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ pingResult["FailureCount"] }}
</el-descriptions-item>
<el-descriptions-item
label="最小响应时间"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ pingResult["MinimumResponseTime"] }}
</el-descriptions-item>
<el-descriptions-item
label="最大响应时间"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ pingResult["MaximumResponseTime"] }}
</el-descriptions-item>
<el-descriptions-item
label="平均响应时间"
label-align="center"
align="center"
label-class-name="my-label"
class-name="my-content"
width="150px"
>
{{ pingResult["AverageResponseTime"] }}
</el-descriptions-item>
</el-descriptions>
</el-card>
</div>
</template>
@ -92,11 +159,13 @@
import { PingForm } from "@/api/remote/types";
import { FormInstance, FormRules } from "element-plus";
import { remoteIpPing } from "@/api/remote";
import { Grid } from "@element-plus/icons-vue";
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 pingResult = ref<any>({});
const rules = reactive<FormRules<PingForm>>({
host: [{ required: true, message: "请输入主机", trigger: "blur" }],
pingNumber: [{ required: true, message: "请输入重复次数", trigger: "blur" }],
@ -113,12 +182,8 @@ const submitForm = async (formEl: FormInstance | undefined) => {
if (valid) {
loading.value = true;
remoteIpPing(formData.value)
.then(() => {
ElMessage({
message: "操作成功",
duration: 1000,
type: "success",
});
.then(({ data }) => {
pingResult.value = data;
})
.finally(() => {
loading.value = false;
@ -139,4 +204,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
:deep(.el-card__body) {
padding: 10px 0 10px 0;
}
:deep(.my-content) {
height: 32px;
}
</style>

Write Preview
Loading…
Cancel
Save