feat: 故障管理-基本信息-诊断

src/api/fault/index.ts

@@ -1,5 +1,5 @@
 import request from "@/utils/request";
-import { FaultBasicInfoVO, FaultQuery, FaultQueryVO } from "@/api/fault/types";
+import { FaultBasicInfoVO, FaultDiagnosisResult, FaultQuery, FaultQueryVO } from "@/api/fault/types";
 import { AxiosPromise } from "axios";
 
 export function faultQueryList(data: FaultQuery): AxiosPromise<FaultQueryVO[]> {
@@ -18,3 +18,16 @@ export function faultBasicInfoQuery(
     data,
   });
 }
+export function basicInfoDiagnosis(
+  devId?: number,
+  remote?: string
+): AxiosPromise<FaultDiagnosisResult> {
+  return request({
+    url: "/api/fault/v1/basic_info/diagnosis",
+    method: "GET",
+    params: {
+      devId,
+      remote,
+    },
+  });
+}

src/api/fault/types.ts

@@ -1,13 +1,13 @@
 export interface FaultQueryVO {
-  devId?: number;
+  devId: number;
 
-  devSno?: string;
+  devSno: string;
 
-  devPppoe?: string;
+  devPppoe: string;
 
-  devVendorOui?: string;
+  devVendorOui: string;
 
-  devAdNo?: string;
+  devAdNo: string;
 }
 export interface FaultQuery {
   label: string;
@@ -39,3 +39,10 @@ export interface FaultBasicInfoVO {
 
   softVer?: string;
 }
+export interface FaultDiagnosisResult {
+  errorDesc?: string;
+
+  testResult?: string;
+
+  endTime?: string;
+}

src/views/family/operate/fault-management/components/Diagnosis.vue

@@ -0,0 +1,93 @@
+<template>
+  <el-card shadow="never" v-loading="loading">
+    <template #header>
+      <div class="flex justify-between">
+        <div style="display: flex; align-items: center">
+          <el-icon size="15"> <Grid /> </el-icon>&nbsp;<span
+            style="font-weight: 700; font-size: 14px; line-height: 16px"
+            >{{ prop.name }}</span
+          >
+        </div>
+        <div>
+          <el-button
+            type="primary"
+            :disabled="devId === undefined"
+            @click="openDiagnosis(prop.remote)"
+            >开始诊断</el-button
+          >
+        </div>
+      </div>
+    </template>
+    <div>
+      <el-descriptions :column="1" border>
+        <el-descriptions-item
+          label-align="left"
+          align="left"
+          label-class-name="my-label2"
+          class-name="my-content"
+          width="150px"
+        >
+          <div class="my-content">
+            进行{{ name }} 综合诊断{{ result.endTime }}
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item
+          label-align="left"
+          align="left"
+          label-class-name="my-label2"
+          class-name="my-content"
+          width="150px"
+        >
+          <div class="my-content">测试结果 : {{ result.testResult }}</div>
+        </el-descriptions-item>
+        <el-descriptions-item
+          label-align="left"
+          align="left"
+          label-class-name="my-label2"
+          class-name="my-content"
+          width="150px"
+        >
+          <div class="my-content">修复建议 : {{ result.errorDesc }}</div>
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { Grid } from "@element-plus/icons-vue";
+import { confirm } from "@/utils/confirm";
+import { basicInfoDiagnosis } from "@/api/fault";
+import { FaultDiagnosisResult } from "@/api/fault/types";
+const prop = defineProps<{
+  devId?: number;
+  remote: string;
+  name: string;
+}>();
+const loading = ref<boolean>(false);
+const result = ref<FaultDiagnosisResult>({});
+const openDiagnosis = (remote: string) => {
+  confirm("确定开启诊断吗", () => {
+    loading.value = true;
+    basicInfoDiagnosis(prop.devId, remote)
+      .then(({ data }) => {
+        result.value = data;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  });
+};
+</script>
+
+<style scoped>
+:deep(.my-label2) {
+  width: 0 !important;
+  display: none !important;
+  background: var(--el-color-white) !important;
+}
+.my-content {
+  font-size: 14px;
+  color: var(--el-text-color-regular);
+}
+</style>

src/views/family/operate/fault-management/components/basicInfoQuery.vue

@@ -154,33 +154,29 @@
     </div>
     <div>
       <div v-show="currentTab === 1">
-        <el-card shadow="never">
+        <diagnosis name="有线无法上网" :dev-id="vo.devId" remote="1-1" />
-          <template #header>
+      </div>
-            <div class="flex justify-between">
+      <div v-show="currentTab === 2">
-              <div style="display: flex; align-items: center">
+        <diagnosis name="上网速度慢" :dev-id="vo.devId" remote="1-3" />
-                <el-icon size="15"> <Grid /> </el-icon>&nbsp;<span
+      </div>
-                  style="font-weight: 700; font-size: 14px; line-height: 16px"
+      <div v-show="currentTab === 3">
-                  >有线无法上网</span
+        <diagnosis name="用户异常掉线" :dev-id="vo.devId" remote="1-2" />
-                >
-              </div>
-              <div>
-                <el-button type="primary">开始诊断</el-button>
-              </div>
-            </div>
-          </template>
-          <el-empty description="暂无任何信息" />
-        </el-card>
       </div>
-      <div v-show="currentTab === 2">上网速度慢</div>
-      <div v-show="currentTab === 3">用户异常掉线</div>
     </div>
   </el-scrollbar>
 </template>
 
 <script setup lang="ts">
-import { Grid } from "@element-plus/icons-vue";
+import { Grid, StarFilled } from "@element-plus/icons-vue";
-import { faultBasicInfoQuery } from "@/api/fault";
+import { basicInfoDiagnosis, faultBasicInfoQuery } from "@/api/fault";
-import { FaultBasicInfoVO, FaultQuery, FaultQueryVO } from "@/api/fault/types";
+import {
+  FaultBasicInfoVO,
+  FaultDiagnosisResult,
+  FaultQuery,
+  FaultQueryVO,
+} from "@/api/fault/types";
+import { confirm } from "@/utils/confirm";
+import Diagnosis from "@/views/family/operate/fault-management/components/Diagnosis.vue";
 
 const loading = ref<boolean>(false);
 const currentTab = ref<number>(1);
@@ -198,6 +194,7 @@ const getBasicInfo = (queryVO: FaultQueryVO) => {
   let searchForm: FaultQuery = {
     label: "devSno",
     value: queryVO.devSno,
+    ping: [],
   };
   faultBasicInfoQuery(searchForm)
     .then(({ data }) => {

src/views/family/operate/fault-management/index.vue

@@ -127,7 +127,7 @@ defineOptions({
   name: "FaultManagement",
   inheritAttrs: false,
 });
-const loading = ref<string>();
+const loading = ref<boolean>(false);
 const searchForm = ref<FaultQuery>({
   label: "devSno",
   value: "",
@@ -224,7 +224,10 @@ const loadBasicInfo = (vo: FaultQueryVO) => {
   cursor: pointer;
   right: 0;
 }
-
+.dropdown .close:hover {
+  background-color: var(--el-color-primary);
+  color: var(--el-color-white);
+}
 .dropdown ul {
   list-style: none;
   padding: 0;