fix: 设备能力信息

src/api/remote/types.ts

@@ -1,6 +1,8 @@
 export interface RemoteDevInfoVO {
   devId?: number;
 
+  typeAndVerId?: number;
+
   devAdNo?: string;
 
   devSno?: string;

src/api/resources-equipment/types.ts

@@ -98,6 +98,7 @@ export interface PrivateProfile {
 export interface RemoteEquipmentTable {
   devId?: number;
   devSno?: string;
+  typeAndVerId?: number;
   devAdNo?: string;
   devPppoe?: string;
   devStatus?: string;

src/api/type-ver-ext/index.ts

@@ -10,6 +10,14 @@ export function getCapabilityForm(
     method: "GET",
   });
 }
+export function getCapabilityVO(
+  typeAndVerId: number
+): AxiosPromise<CapabilityForm> {
+  return request({
+    url: `/api/type-ver-ext/v1//remote/capability/${typeAndVerId}`,
+    method: "GET",
+  });
+}
 export function editCapabilityForm(data: CapabilityForm) {
   return request({
     url: `/api/type-ver-ext/v1/edit`,

src/router/index.ts

@@ -218,7 +218,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         },
       },
       {
-        path: "/resources/remote-info/:devId",
+        path: "/resources/remote-info/:devId/:typeAndVerId",
         name: "RemoteOperateInfo",
         component: () =>
           import(

src/utils/index.ts

@@ -78,3 +78,15 @@ export function downloadHook(res: AxiosResponse) {
   // 释放掉blob对象
   window.URL.revokeObjectURL(href);
 }
+
+export function getLabelByValue(options: OptionType[], value: string): string {
+  // 遍历选项数组，查找与给定值匹配的项
+  for (const option of options) {
+    if (option.value === value) {
+      // 如果找到匹配项，返回其标签
+      return option.label;
+    }
+  }
+  // 如果没有找到匹配项，返回null
+  return "";
+}

src/views/family/operate/remote-operation/components/DeviceAbility.vue

@@ -0,0 +1,169 @@
+<template>
+  <div style="margin-top: 10px">
+    <el-descriptions
+      title="设备能力信息"
+      v-loading="loadingCapability"
+      :column="3"
+      border
+    >
+      <el-descriptions-item
+        label="LAN口数量"
+        label-align="left"
+        align="center"
+        label-class-name="my-label"
+        class-name="my-content"
+        width="180px"
+      >
+        {{ ability.lanNumber }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="VOIP端口数量"
+        label-align="left"
+        align="center"
+        label-class-name="my-label"
+        class-name="my-content"
+        width="180px"
+      >
+        {{ ability.voipPortNumber }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="GE端口数"
+        label-align="left"
+        align="center"
+        label-class-name="my-label"
+        class-name="my-content"
+        width="180px"
+      >
+        {{ ability.gePortNumber }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="FE端口数"
+        label-align="left"
+        align="center"
+        label-class-name="my-label"
+        class-name="my-content"
+        width="180px"
+      >
+        {{ ability.fePortNumber }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="WIFI类型"
+        label-align="left"
+        align="center"
+        label-class-name="my-label"
+        class-name="my-content"
+        width="180px"
+      >
+        {{ ability.wifiType }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="WIFI配置"
+        label-align="left"
+        align="center"
+        label-class-name="my-label"
+        class-name="my-content"
+        width="180px"
+      >
+        {{ ability.wifiConfig }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="语音协议"
+        label-align="left"
+        align="center"
+        label-class-name="my-label"
+        class-name="my-content"
+        width="180px"
+      >
+        {{ ability.voipProtocol }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="设备能力"
+        label-align="left"
+        align="center"
+        label-class-name="my-label"
+        class-name="my-content"
+        width="180px"
+      >
+        {{ ability.capability }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="是否支持MESH组网"
+        label-align="left"
+        align="center"
+        label-class-name="my-label"
+        class-name="my-content"
+        width="180px"
+      >
+        {{ ability.mesh }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="是否支持云网关"
+        label-align="left"
+        align="center"
+        label-class-name="my-label"
+        class-name="my-content"
+        width="180px"
+      >
+        {{ ability.ywg }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="是否支持测速"
+        label-align="left"
+        align="center"
+        label-class-name="my-label"
+        class-name="my-content"
+        width="180px"
+      >
+        {{ ability.tr143 }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="是否支持IPV6"
+        label-align="left"
+        align="center"
+        label-class-name="my-label"
+        class-name="my-content"
+        width="180px"
+      >
+        {{ ability.ipv6Enable }}
+      </el-descriptions-item>
+      <el-descriptions-item
+        label="是否重启生效"
+        label-align="left"
+        align="center"
+        label-class-name="my-label"
+        class-name="my-content"
+        width="180px"
+      >
+        {{ ability.reboot }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CapabilityForm } from "@/api/type-ver-ext/types";
+import { getCapabilityVO } from "@/api/type-ver-ext";
+
+const prop = defineProps<{
+  typeAndVerId: number;
+}>();
+const loadingCapability = ref<boolean>(false);
+const ability = ref<CapabilityForm>({});
+const loadCapabilityVO = async () => {
+  loadingCapability.value = true;
+  await getCapabilityVO(prop.typeAndVerId)
+    .then(({ data }) => {
+      if (data != null) {
+        ability.value = data;
+      }
+    })
+    .finally(() => {
+      loadingCapability.value = false;
+    });
+};
+onMounted(() => {
+  loadCapabilityVO();
+});
+</script>
+
+<style scoped></style>

src/views/family/operate/remote-operation/components/DeviceStatus.vue

@@ -0,0 +1,43 @@
+<template>
+  <el-descriptions title="设备状态" :column="3" border>
+    <template #extra>
+      <el-button type="primary">获取设备链路信息</el-button>
+    </template>
+    <el-descriptions-item
+      label="设备在线状态"
+      label-align="left"
+      align="center"
+      label-class-name="my-label"
+      class-name="my-content"
+      width="150px"
+    />
+    <el-descriptions-item
+      label="设备在线时间"
+      label-align="left"
+      align="center"
+      label-class-name="my-label"
+      class-name="my-content"
+      width="150px"
+    />
+    <el-descriptions-item
+      label="设备创建时间"
+      label-align="left"
+      align="center"
+      label-class-name="my-label"
+      class-name="my-content"
+      width="150px"
+    />
+  </el-descriptions>
+  <device-ability :type-and-ver-id="typeAndVerId" />
+</template>
+
+<script setup lang="ts">
+import DeviceAbility from "@/views/family/operate/remote-operation/components/DeviceAbility.vue";
+
+const prop = defineProps<{
+  devId: number;
+  typeAndVerId: number;
+}>();
+</script>
+
+<style scoped></style>

src/views/family/operate/remote-operation/components/OperateTabs.vue

@@ -0,0 +1,24 @@
+<template>
+  <div style="margin-top: 10px">
+    <el-tabs type="border-card">
+      <el-tab-pane label="设备状态信息">
+        <device-status :dev-id="devId" :type-and-ver-id="prop.typeAndVerId" />
+      </el-tab-pane>
+      <el-tab-pane :label="label" v-for="(label, index) in tabs" :key="index">{{
+        label
+      }}</el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DeviceStatus from "@/views/family/operate/remote-operation/components/DeviceStatus.vue";
+
+const prop = defineProps<{
+  devId: number;
+  typeAndVerId: number;
+}>();
+const tabs = ref<string[]>([]);
+</script>
+
+<style scoped></style>

src/views/family/operate/remote-operation/components/RemoteOperateInfo.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="app-container">
+    <el-scrollbar height="600">
       <el-card shadow="never" v-loading="loading">
         <el-descriptions title="设备信息" :column="2" border>
           <template
@@ -204,43 +205,47 @@
                         <el-dropdown-item>设备参数树浏览</el-dropdown-item>
                       </div>
                       <div v-hasPerm="['family:remote:ping:test']">
-                      <el-dropdown-item divided>设备Ping测试</el-dropdown-item>
+                        <el-dropdown-item divided
+                          >设备Ping测试</el-dropdown-item
+                        >
                       </div>
                       <div v-hasPerm="['family:remote:profiles:upload']">
                         <el-dropdown-item divided
-                        >设备配置文件上传</el-dropdown-item
-                      >
+                          >设备配置文件上传
+                        </el-dropdown-item>
                       </div>
                       <div v-hasPerm="['family:remote:terminal:log_file']">
                         <el-dropdown-item divided
-                        >获取设备终端日志文件</el-dropdown-item
-                      >
+                          >获取设备终端日志文件
+                        </el-dropdown-item>
                       </div>
                       <div v-hasPerm="['family:remote:dev:change']">
                         <el-dropdown-item divided>设备更换</el-dropdown-item>
                       </div>
                       <div v-hasPerm="['family:remote:dev:reload']">
-                      <el-dropdown-item divided>设备远程重启</el-dropdown-item>
+                        <el-dropdown-item divided
+                          >设备远程重启</el-dropdown-item
+                        >
                       </div>
                       <div v-hasPerm="['family:remote:profiles:issued']">
                         <el-dropdown-item divided
-                        >设备厂商配置文件下发</el-dropdown-item
-                      >
+                          >设备厂商配置文件下发
+                        </el-dropdown-item>
                       </div>
                       <div v-hasPerm="['family:remote:full_service:issued']">
                         <el-dropdown-item divided
-                        >设备全业务配置下发</el-dropdown-item
-                      >
+                          >设备全业务配置下发
+                        </el-dropdown-item>
                       </div>
                       <div v-hasPerm="['family:remote:soft_ver:upgrade']">
                         <el-dropdown-item divided
-                        >设备软件版本升级</el-dropdown-item
-                      >
+                          >设备软件版本升级
+                        </el-dropdown-item>
                       </div>
                       <div v-hasPerm="['family:remote:loop_back:diagnosis']">
                         <el-dropdown-item divided
-                        >ATMF5Loopback诊断</el-dropdown-item
-                      >
+                          >ATMF5Loopback诊断
+                        </el-dropdown-item>
                       </div>
                       <div v-hasPerm="['family:remote:dsl_loop:diagnosis']">
                         <el-dropdown-item divided>DslLoop诊断</el-dropdown-item>
@@ -253,60 +258,66 @@
                       </div>
                       <div v-hasPerm="['family:remote:service_port:binding']">
                         <el-dropdown-item divided
-                        >修改业务端口绑定</el-dropdown-item
-                      >
+                          >修改业务端口绑定
+                        </el-dropdown-item>
                       </div>
                       <div v-hasPerm="['family:remote:terminal:registration']">
                         <el-dropdown-item divided
-                        >开启终端注册页面</el-dropdown-item
-                      >
+                          >开启终端注册页面
+                        </el-dropdown-item>
                       </div>
                       <div v-hasPerm="['family:remote:speed:operation']">
                         <el-dropdown-item divided>测速操作</el-dropdown-item>
                       </div>
                       <div v-hasPerm="['family:remote:reset:graphs']">
-                      <el-dropdown-item divided>终端重置数图</el-dropdown-item>
+                        <el-dropdown-item divided
+                          >终端重置数图</el-dropdown-item
+                        >
                       </div>
                       <div v-hasPerm="['family:remote:iptv:multicast']">
-                      <el-dropdown-item divided>重置IPTV组播</el-dropdown-item>
+                        <el-dropdown-item divided
+                          >重置IPTV组播</el-dropdown-item
+                        >
                       </div>
                       <div v-hasPerm="['family:remote:node:customize']">
                         <el-dropdown-item divided
-                        >自定义节点定制</el-dropdown-item
-                      >
+                          >自定义节点定制
+                        </el-dropdown-item>
                       </div>
                       <div v-hasPerm="['family:remote:broadband_1_4:itv_2_3']">
                         <el-dropdown-item divided
-                        >宽带1、4口;ITV 2、3口</el-dropdown-item
-                      >
+                          >宽带1、4口;ITV 2、3口
+                        </el-dropdown-item>
                       </div>
                       <div v-hasPerm="['family:remote:broadband_3_4:itv_1_2']">
                         <el-dropdown-item divided
-                        >宽带3、4口;ITV 1、2口</el-dropdown-item
-                      >
+                          >宽带3、4口;ITV 1、2口
+                        </el-dropdown-item>
                       </div>
                       <div v-hasPerm="['family:remote:broadband_1:itv_2_3_4']">
                         <el-dropdown-item divided
-                        >宽带1口;ITV 2、3、4口</el-dropdown-item
-                      >
+                          >宽带1口;ITV 2、3、4口
+                        </el-dropdown-item>
                       </div>
                       <div v-hasPerm="['family:remote:broadband_1_3_4:itv_2']">
                         <el-dropdown-item divided
-                        >宽带1、3、4口;ITV 2口</el-dropdown-item
-                      >
+                          >宽带1、3、4口;ITV 2口
+                        </el-dropdown-item>
                       </div>
                       <div v-hasPerm="['family:remote:broadband_1_2_3_4']">
                         <el-dropdown-item divided
-                        >宽带1、 2、3、4口</el-dropdown-item
-                      >
+                          >宽带1、 2、3、4口
+                        </el-dropdown-item>
                       </div>
                       <div v-hasPerm="['family:remote:broadband_1_3:itv_2']">
                         <el-dropdown-item divided
-                        >三合一终端宽带1、3口;ITV 2口</el-dropdown-item
-                      >
+                          >三合一终端宽带1、3口;ITV 2口
+                        </el-dropdown-item>
                       </div>
                       <div v-hasPerm="['family:remote:info:update']">
-                      <el-dropdown-item divided>通用信息修改</el-dropdown-item>
+                        <el-dropdown-item divided
+                          >通用信息修改</el-dropdown-item
+                        >
                       </div>
                     </el-scrollbar>
                   </el-dropdown-menu>
@@ -326,6 +337,8 @@
           </el-descriptions-item>
         </el-descriptions>
       </el-card>
+      <operate-tabs :dev-id="devId" :type-and-ver-id="typeAndVerId" />
+    </el-scrollbar>
   </div>
 </template>
 
@@ -333,9 +346,12 @@
 import { RemoteDevInfoVO, UnBindingForm } from "@/api/remote/types";
 import { remoteDevInfo, remoteUnbindingLogicId } from "@/api/remote";
 import { InfoFilled } from "@element-plus/icons-vue";
+import OperateTabs from "@/views/family/operate/remote-operation/components/OperateTabs.vue";
 
 const route = useRoute();
 let devId: number = parseInt(<string>route.params.devId);
+let typeAndVerId: number = parseInt(<string>route.params.typeAndVerId);
+
 const remote = ref<RemoteDevInfoVO>({});
 const unbindingForm = ref<UnBindingForm>({});
 const loading = ref<boolean>(false);

src/views/family/operate/remote-operation/index.vue

@@ -65,7 +65,7 @@
               <el-button
                 type="primary"
                 link
-                @click="skipRemoteInfo(scope.row.devId)"
+                @click="skipRemoteInfo(scope.row)"
                 >{{ scope.row.devVendorOui }}-{{ scope.row.devSno }}</el-button
               >
             </template>
@@ -220,8 +220,8 @@ const handleQuery = () => {
       loading.value = false;
     });
 };
-const skipRemoteInfo = (devId: number) => {
-  router.push({ path: `/resources/remote-info/${devId}` });
+const skipRemoteInfo = (row: RemoteEquipmentTable) => {
+  router.push({ path: `/resources/remote-info/${row.devId}/${row.typeAndVerId}` });
 };
 </script>