From 98ed3168be6b29ee0bc845129387882ddcab7677 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=B0=8F=E6=9E=97?= <320730042@qq.com>
Date: Wed, 28 Aug 2024 16:57:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=85=E9=9A=9C=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/remote/index.ts                       |   2 +-
 .../components/FaultApplication.vue           |  48 +-
 .../components/FaultDiagnosisUtil.vue         |  87 +++
 .../components/IptvIsNotAvailable.vue         | 127 ++++
 .../components/UserExceptDisconnected.vue     | 279 +++++++++
 .../components/WirelessIsNotAvailable.vue     | 543 ++++++++++++++++++
 .../remote-operation/components/Ping.vue      |  80 ++-
 7 files changed, 1158 insertions(+), 8 deletions(-)
 create mode 100644 src/views/family/operate/fault-management/components/FaultDiagnosisUtil.vue
 create mode 100644 src/views/family/operate/fault-management/components/IptvIsNotAvailable.vue
 create mode 100644 src/views/family/operate/fault-management/components/UserExceptDisconnected.vue
 create mode 100644 src/views/family/operate/fault-management/components/WirelessIsNotAvailable.vue

diff --git a/src/api/remote/index.ts b/src/api/remote/index.ts
index 84667d4..48b6d14 100644
--- a/src/api/remote/index.ts
+++ b/src/api/remote/index.ts
@@ -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",
diff --git a/src/views/family/operate/fault-management/components/FaultApplication.vue b/src/views/family/operate/fault-management/components/FaultApplication.vue
index 47d3690..2058077 100644
--- a/src/views/family/operate/fault-management/components/FaultApplication.vue
+++ b/src/views/family/operate/fault-management/components/FaultApplication.vue
@@ -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;
diff --git a/src/views/family/operate/fault-management/components/FaultDiagnosisUtil.vue b/src/views/family/operate/fault-management/components/FaultDiagnosisUtil.vue
new file mode 100644
index 0000000..862f8c2
--- /dev/null
+++ b/src/views/family/operate/fault-management/components/FaultDiagnosisUtil.vue
@@ -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>
diff --git a/src/views/family/operate/fault-management/components/IptvIsNotAvailable.vue b/src/views/family/operate/fault-management/components/IptvIsNotAvailable.vue
new file mode 100644
index 0000000..e2174e4
--- /dev/null
+++ b/src/views/family/operate/fault-management/components/IptvIsNotAvailable.vue
@@ -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>
diff --git a/src/views/family/operate/fault-management/components/UserExceptDisconnected.vue b/src/views/family/operate/fault-management/components/UserExceptDisconnected.vue
new file mode 100644
index 0000000..8bce9b1
--- /dev/null
+++ b/src/views/family/operate/fault-management/components/UserExceptDisconnected.vue
@@ -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>
diff --git a/src/views/family/operate/fault-management/components/WirelessIsNotAvailable.vue b/src/views/family/operate/fault-management/components/WirelessIsNotAvailable.vue
new file mode 100644
index 0000000..7d42bde
--- /dev/null
+++ b/src/views/family/operate/fault-management/components/WirelessIsNotAvailable.vue
@@ -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>
diff --git a/src/views/family/operate/remote-operation/components/Ping.vue b/src/views/family/operate/remote-operation/components/Ping.vue
index 7d4ccf1..4986548 100644
--- a/src/views/family/operate/remote-operation/components/Ping.vue
+++ b/src/views/family/operate/remote-operation/components/Ping.vue
@@ -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>