From 12f8a461576a82722a618d07d60fd101e351d147 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=B0=8F=E6=9E=97?= <320730042@qq.com>
Date: Tue, 27 Aug 2024 18:04:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=85=E9=9A=9C=E7=AE=A1=E7=90=86-?=
 =?UTF-8?q?=E6=9C=89=E7=BA=BF=E6=97=A0=E6=B3=95=E4=B8=8A=E7=BD=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/fault/index.ts                        |  24 +-
 .../components/FaultApplication.vue           |  32 +
 .../components/WiredIsNotAvailable.vue        | 607 ++++++++++++++++++
 .../family/operate/fault-management/index.vue |   5 +-
 4 files changed, 662 insertions(+), 6 deletions(-)
 create mode 100644 src/views/family/operate/fault-management/components/FaultApplication.vue
 create mode 100644 src/views/family/operate/fault-management/components/WiredIsNotAvailable.vue

diff --git a/src/api/fault/index.ts b/src/api/fault/index.ts
index 68b601b..0195717 100644
--- a/src/api/fault/index.ts
+++ b/src/api/fault/index.ts
@@ -1,12 +1,13 @@
 import request from "@/utils/request";
 import {
   AlgForm,
-  CpeForm, ExpertLibForm,
+  CpeForm,
+  ExpertLibForm,
   ExpertLibPageResult,
   FaultBasicInfoVO,
   FaultDiagnosisResult,
   FaultQuery,
-  FaultQueryVO
+  FaultQueryVO,
 } from "@/api/fault/types";
 import { AxiosPromise } from "axios";
 
@@ -82,13 +83,13 @@ export function getExpertLibPage(
     data,
   });
 }
-export function deleteExpertLib(code?: string){
+export function deleteExpertLib(code?: string) {
   return request({
     url: `/api/expert/v1/delete/${code}`,
     method: "DELETE",
   });
 }
-export function addExpertLib(data: ExpertLibForm){
+export function addExpertLib(data: ExpertLibForm) {
   return request({
     url: `/api/expert/v1/add`,
     method: "POST",
@@ -101,10 +102,23 @@ export function getExpertLib(code?: string): AxiosPromise<ExpertLibForm> {
     method: "GET",
   });
 }
-export function updateExpertLib(data: ExpertLibForm){
+export function updateExpertLib(data: ExpertLibForm) {
   return request({
     url: `/api/expert/v1/edit`,
     method: "POST",
     data,
   });
 }
+export function pingDNSResult(
+  devId?: number,
+  remote?: string
+): AxiosPromise<any> {
+  return request({
+    url: "/api/fault/v1/ping-dns",
+    method: "GET",
+    params: {
+      devId,
+      remote,
+    },
+  });
+}
diff --git a/src/views/family/operate/fault-management/components/FaultApplication.vue b/src/views/family/operate/fault-management/components/FaultApplication.vue
new file mode 100644
index 0000000..47d3690
--- /dev/null
+++ b/src/views/family/operate/fault-management/components/FaultApplication.vue
@@ -0,0 +1,32 @@
+<template>
+  <el-tabs type="border-card" class="demo-tabs">
+    <el-tab-pane>
+      <template #label>
+        <span class="custom-tabs-label">
+          <el-icon><MostlyCloudy /></el-icon>
+          <span>有线无法上网</span>
+        </span>
+      </template>
+      <wired-is-not-available :dev-id="prop.devId" />
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup lang="ts">
+import { MostlyCloudy } from "@element-plus/icons-vue";
+import WiredIsNotAvailable from "@/views/family/operate/fault-management/components/WiredIsNotAvailable.vue";
+
+const prop = defineProps<{
+  devId: number;
+}>();
+</script>
+
+<style scoped>
+.demo-tabs .custom-tabs-label .el-icon {
+  vertical-align: middle;
+}
+.demo-tabs .custom-tabs-label span {
+  vertical-align: middle;
+  margin-left: 4px;
+}
+</style>
diff --git a/src/views/family/operate/fault-management/components/WiredIsNotAvailable.vue b/src/views/family/operate/fault-management/components/WiredIsNotAvailable.vue
new file mode 100644
index 0000000..73000c4
--- /dev/null
+++ b/src/views/family/operate/fault-management/components/WiredIsNotAvailable.vue
@@ -0,0 +1,607 @@
+<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="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"
+              >PC连接检查</span
+            >
+          </div>
+        </template>
+        <el-descriptions-item
+          label="LAN1"
+          label-align="center"
+          align="center"
+          label-class-name="my-label"
+          class-name="my-content"
+          width="150px"
+        >
+          {{ getLanValue("1") }}
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="LAN2"
+          label-align="center"
+          align="center"
+          label-class-name="my-label"
+          class-name="my-content"
+          width="150px"
+        >
+          {{ getLanValue("2") }}
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="LAN3"
+          label-align="center"
+          align="center"
+          label-class-name="my-label"
+          class-name="my-content"
+          width="150px"
+          >{{ getLanValue("3") }}
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="LAN4"
+          label-align="center"
+          align="center"
+          label-class-name="my-label"
+          class-name="my-content"
+          width="150px"
+        >
+          {{ getLanValue("4") }}
+        </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="lan['state'] != '2' && lan['state'] != undefined"
+        >
+          <div style="color: red; padding: 0 8px; font-size: 10px">
+            错误信息：{{ lan["result"] }}
+          </div>
+        </el-descriptions-item>
+      </el-descriptions>
+      <el-descriptions
+        v-loading="loading"
+        direction="vertical"
+        border
+        :column="3"
+      >
+        <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"
+              >DHCP检查</span
+            >
+          </div>
+        </template>
+        <el-descriptions-item
+          label="IP地址"
+          label-align="center"
+          align="center"
+          label-class-name="my-label"
+          class-name="my-content"
+          width="150px"
+        >
+          {{ getDhcpResult["IpAddress"] }}
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="MAC地址"
+          label-align="center"
+          align="center"
+          label-class-name="my-label"
+          class-name="my-content"
+          width="150px"
+        >
+          {{ getDhcpResult["MacAddress"] }}
+        </el-descriptions-item>
+        <el-descriptions-item
+          label="地址来源"
+          label-align="center"
+          align="center"
+          label-class-name="my-label"
+          class-name="my-content"
+          width="150px"
+          >{{ getDhcpResult["AddressSource"] }}
+        </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="lan['state'] != '2' && lan['state'] != undefined"
+        >
+          <div style="color: red; padding: 0 8px; font-size: 10px">
+            错误信息：{{ lan["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"
+              >DNS检查</span
+            >
+          </div>
+        </template>
+        <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="IP地址"
+          label-align="center"
+          align="center"
+          label-class-name="my-label"
+          class-name="my-content"
+          width="150px"
+        >
+          {{ broadband["Ipaddress"] }}
+        </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-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 lan = 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;
+        case "DigitalhomeQueryDSL":
+          broadband.value = data;
+          break;
+        case "LanActiveQuery":
+          lan.value = data;
+          break;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+};
+function getLanValue(index?: string) {
+  let active = lan.value["Active"];
+  let lanIndex = lan.value["lanIndex"];
+  if (active === undefined || lanIndex == undefined) {
+    return;
+  }
+  let tmpActive: string[] = active.split("#");
+  let tmpLanIndex: string[] = lanIndex.split("#");
+  for (let i = 0; i < tmpLanIndex.length; i++) {
+    if (tmpLanIndex[i] === index) {
+      return tmpActive[i];
+    }
+  }
+}
+// eslint-disable-next-line vue/return-in-computed-property
+const getDhcpResult = computed(() => {
+  let active = lan.value["Active"];
+  let addressSource = lan.value["AddressSource"];
+  let ipAddress = lan.value["ipAddress"];
+  let macAddress = lan.value["MACAddress"];
+  if (active === undefined) {
+    return { IpAddress: "", MacAddress: "", AddressSource: "" };
+  }
+  let tmpIpAddress: string[] = ipAddress.split("#");
+  let tmpMacAddress: string[] = macAddress.split("#");
+  let tmpAddressSource: string[] = addressSource.split("#");
+  let tmpActive: string[] = active.split("#");
+  for (let i = 0; i < tmpActive.length; i++) {
+    if (tmpActive[i] === "true" && tmpAddressSource[i] === "DHCP") {
+      return {
+        IpAddress: tmpIpAddress[i],
+        MacAddress: tmpMacAddress[i],
+        AddressSource: tmpAddressSource[i],
+      };
+    }
+  }
+});
+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 getServiceDetailInfo("DigitalhomeQueryDSL");
+  await getPingResult("ipping");
+  await getServiceDetailInfo("LanActiveQuery");
+};
+</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/index.vue b/src/views/family/operate/fault-management/index.vue
index 88b3e31..8bfa4e3 100644
--- a/src/views/family/operate/fault-management/index.vue
+++ b/src/views/family/operate/fault-management/index.vue
@@ -110,7 +110,9 @@
         <div v-show="currentTab === 1">
           <service-endpoint-status :dev-id="currentFaultQueryVO.devId" />
         </div>
-        <div v-show="currentTab === 2">故障诊断应用</div>
+        <div v-show="currentTab === 2">
+          <fault-application :dev-id="currentFaultQueryVO.devId" />
+        </div>
         <div v-show="currentTab === 3">
           <advanced-queries :dev-id="currentFaultQueryVO.devId" />
         </div>
@@ -131,6 +133,7 @@ import { Close } from "@element-plus/icons-vue";
 import ServiceEndpointStatus from "@/views/family/operate/fault-management/components/ServiceEndpointStatus.vue";
 import AdvancedQueries from "@/views/family/operate/fault-management/components/AdvancedQueries.vue";
 import ExpertLib from "@/views/family/operate/fault-management/components/ExpertLib.vue";
+import FaultApplication from "@/views/family/operate/fault-management/components/FaultApplication.vue";
 
 defineOptions({
   name: "FaultManagement",