From c12893d077b08f867a98216107a35a6c86a38333 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=B0=8F=E6=9E=97?= <320730042@qq.com>
Date: Mon, 1 Jul 2024 17:02:06 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AE=BE=E5=A4=87=E8=83=BD=E5=8A=9B?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/remote/types.ts                       |   2 +
 src/api/resources-equipment/types.ts          |   1 +
 src/api/type-ver-ext/index.ts                 |   8 +
 src/router/index.ts                           |   2 +-
 src/utils/index.ts                            |  12 +
 .../components/DeviceAbility.vue              | 169 +++++
 .../components/DeviceStatus.vue               |  43 ++
 .../components/OperateTabs.vue                |  24 +
 .../components/RemoteOperateInfo.vue          | 664 +++++++++---------
 .../family/operate/remote-operation/index.vue |   6 +-
 10 files changed, 603 insertions(+), 328 deletions(-)
 create mode 100644 src/views/family/operate/remote-operation/components/DeviceAbility.vue
 create mode 100644 src/views/family/operate/remote-operation/components/DeviceStatus.vue
 create mode 100644 src/views/family/operate/remote-operation/components/OperateTabs.vue

diff --git a/src/api/remote/types.ts b/src/api/remote/types.ts
index e9f866d..40feb45 100644
--- a/src/api/remote/types.ts
+++ b/src/api/remote/types.ts
@@ -1,6 +1,8 @@
 export interface RemoteDevInfoVO {
   devId?: number;
 
+  typeAndVerId?: number;
+
   devAdNo?: string;
 
   devSno?: string;
diff --git a/src/api/resources-equipment/types.ts b/src/api/resources-equipment/types.ts
index c0bd301..f6305af 100644
--- a/src/api/resources-equipment/types.ts
+++ b/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;
diff --git a/src/api/type-ver-ext/index.ts b/src/api/type-ver-ext/index.ts
index b7da40d..6cd756e 100644
--- a/src/api/type-ver-ext/index.ts
+++ b/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`,
diff --git a/src/router/index.ts b/src/router/index.ts
index d9f00cd..7800529 100644
--- a/src/router/index.ts
+++ b/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(
diff --git a/src/utils/index.ts b/src/utils/index.ts
index f8fd449..0e825c7 100644
--- a/src/utils/index.ts
+++ b/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 "";
+}
diff --git a/src/views/family/operate/remote-operation/components/DeviceAbility.vue b/src/views/family/operate/remote-operation/components/DeviceAbility.vue
new file mode 100644
index 0000000..004d6bb
--- /dev/null
+++ b/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>
diff --git a/src/views/family/operate/remote-operation/components/DeviceStatus.vue b/src/views/family/operate/remote-operation/components/DeviceStatus.vue
new file mode 100644
index 0000000..566122c
--- /dev/null
+++ b/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>
diff --git a/src/views/family/operate/remote-operation/components/OperateTabs.vue b/src/views/family/operate/remote-operation/components/OperateTabs.vue
new file mode 100644
index 0000000..6190818
--- /dev/null
+++ b/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>
diff --git a/src/views/family/operate/remote-operation/components/RemoteOperateInfo.vue b/src/views/family/operate/remote-operation/components/RemoteOperateInfo.vue
index dcfee96..cf0f53b 100644
--- a/src/views/family/operate/remote-operation/components/RemoteOperateInfo.vue
+++ b/src/views/family/operate/remote-operation/components/RemoteOperateInfo.vue
@@ -1,331 +1,344 @@
 <template>
   <div class="app-container">
-    <el-card shadow="never" v-loading="loading">
-      <el-descriptions title="设备信息" :column="2" border>
-        <template
-          #extra
-          v-if="
-            remote.devRemark4 != null &&
-            remote.devStatus != '预解绑' &&
-            remote.devStatus != '预拆机'
-          "
-        >
-          <el-popconfirm
-            width="220"
-            confirm-button-text="确认"
-            cancel-button-text="取消"
-            :icon="InfoFilled"
-            @confirm="unbindingLogicId"
-            icon-color="#626AEF"
-            title="确定解绑逻辑ID吗?"
+    <el-scrollbar height="600">
+      <el-card shadow="never" v-loading="loading">
+        <el-descriptions title="设备信息" :column="2" border>
+          <template
+            #extra
+            v-if="
+              remote.devRemark4 != null &&
+              remote.devStatus != '预解绑' &&
+              remote.devStatus != '预拆机'
+            "
           >
-            <template #reference>
-              <el-button type="primary">解绑逻辑ID</el-button>
-            </template>
-          </el-popconfirm>
-        </template>
-        <el-descriptions-item
-          label="AD编号"
-          label-align="left"
-          align="center"
-          label-class-name="my-label"
-          class-name="my-content"
-          width="150px"
-        >
-          {{ remote.devAdNo }}
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="设备PPPoE帐号"
-          label-align="left"
-          align="center"
-          label-class-name="my-label"
-          class-name="my-content"
-          width="150px"
-        >
-          {{ remote.devPppoe }}
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="设备序列号"
-          label-align="left"
-          align="center"
-          label-class-name="my-label"
-          class-name="my-content"
-          width="150px"
-        >
-          {{ remote.devVendorOui }}-{{ remote.devSno }}
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="设备类型和软件版本"
-          label-align="left"
-          align="center"
-          label-class-name="my-label"
-          class-name="my-content"
-          width="150px"
-        >
-          {{ remote.devVendorName }}&nbsp;{{ remote.devTypeName }}&nbsp;{{
-            remote.devHardVer
-          }}&nbsp;{{ remote.softVer }}
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="设备系统管理域"
-          label-align="left"
-          align="center"
-          label-class-name="my-label"
-          class-name="my-content"
-          width="150px"
-        >
-          {{ remote.domain }}
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="黑名单状态"
-          label-align="left"
-          align="center"
-          label-class-name="my-label"
-          class-name="my-content"
-          width="150px"
-        >
-          {{ remote.blacklist }}
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="电信维护帐号密码"
-          label-align="left"
-          align="center"
-          label-class-name="my-label"
-          class-name="my-content"
-          width="150px"
-        >
-          {{ remote.devRemark1 }}
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="逻辑ID"
-          label-align="left"
-          align="center"
-          label-class-name="my-label"
-          class-name="my-content"
-          width="150px"
-        >
-          {{ remote.userSnNo }}
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="安装次数"
-          label-align="left"
-          align="center"
-          label-class-name="my-label"
-          class-name="my-content"
-          width="150px"
-        >
-          {{ remote.useState }}
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="IP"
-          label-align="left"
-          align="center"
-          label-class-name="my-label"
-          class-name="my-content"
-          width="150px"
-        >
-          {{ remote.devIp }}
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="设备当前状态"
-          label-align="left"
-          align="center"
-          label-class-name="my-label"
-          class-name="my-content"
-          width="150px"
-        >
-          {{ remote.devStatus }}
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="客户类型"
-          label-align="left"
-          align="center"
-          label-class-name="my-label"
-          class-name="my-content"
-          width="150px"
-        >
-          {{ remote.customType }}
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="拨号方式"
-          label-align="left"
-          align="center"
-          label-class-name="my-label"
-          class-name="my-content"
-          width="150px"
-        >
-          {{ remote.conType }}
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="最近一次开机时间"
-          label-align="left"
-          align="center"
-          label-class-name="my-label"
-          class-name="my-content"
-          width="150px"
-        >
-          {{ remote.devOnlineTime }}
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="设备网络侧接口"
-          label-align="left"
-          align="center"
-          label-class-name="my-label"
-          class-name="my-content"
-          width="150px"
-        >
-          {{ remote.devAccessType }}
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="设备类型"
-          label-align="left"
-          align="center"
-          label-class-name="my-label"
-          class-name="my-content"
-          width="150px"
-        >
-          {{ remote.devTypeNameDetail }}
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="远程操作"
-          label-align="left"
-          align="center"
-          label-class-name="my-label"
-          class-name="my-content"
-          width="150px"
-        >
-          <div>
-            <el-dropdown split-button placement="right">
-              远程操作列表
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-scrollbar height="300">
-                    <div v-hasPerm="['family:remote:parameter:tree']">
-                      <el-dropdown-item>设备参数树浏览</el-dropdown-item>
-                    </div>
-                    <div v-hasPerm="['family:remote:ping:test']">
-                      <el-dropdown-item divided>设备Ping测试</el-dropdown-item>
-                    </div>
-                    <div v-hasPerm="['family:remote:profiles:upload']">
-                      <el-dropdown-item divided
-                        >设备配置文件上传</el-dropdown-item
-                      >
-                    </div>
-                    <div v-hasPerm="['family:remote:terminal:log_file']">
-                      <el-dropdown-item divided
-                        >获取设备终端日志文件</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>
-                    </div>
-                    <div v-hasPerm="['family:remote:profiles:issued']">
-                      <el-dropdown-item divided
-                        >设备厂商配置文件下发</el-dropdown-item
-                      >
-                    </div>
-                    <div v-hasPerm="['family:remote:full_service:issued']">
-                      <el-dropdown-item divided
-                        >设备全业务配置下发</el-dropdown-item
-                      >
-                    </div>
-                    <div v-hasPerm="['family:remote:soft_ver:upgrade']">
-                      <el-dropdown-item divided
-                        >设备软件版本升级</el-dropdown-item
-                      >
-                    </div>
-                    <div v-hasPerm="['family:remote:loop_back:diagnosis']">
-                      <el-dropdown-item divided
-                        >ATMF5Loopback诊断</el-dropdown-item
-                      >
-                    </div>
-                    <div v-hasPerm="['family:remote:dsl_loop:diagnosis']">
-                      <el-dropdown-item divided>DslLoop诊断</el-dropdown-item>
-                    </div>
-                    <div v-hasPerm="['family:remote:dev:monitor']">
-                      <el-dropdown-item divided>设备监控</el-dropdown-item>
-                    </div>
-                    <div v-hasPerm="['family:remote:ida:diagnosis']">
-                      <el-dropdown-item divided>IAD诊断</el-dropdown-item>
-                    </div>
-                    <div v-hasPerm="['family:remote:service_port:binding']">
-                      <el-dropdown-item divided
-                        >修改业务端口绑定</el-dropdown-item
-                      >
-                    </div>
-                    <div v-hasPerm="['family:remote:terminal:registration']">
-                      <el-dropdown-item divided
-                        >开启终端注册页面</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>
-                    </div>
-                    <div v-hasPerm="['family:remote:iptv:multicast']">
-                      <el-dropdown-item divided>重置IPTV组播</el-dropdown-item>
-                    </div>
-                    <div v-hasPerm="['family:remote:node:customize']">
-                      <el-dropdown-item divided
-                        >自定义节点定制</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
-                      >
-                    </div>
-                    <div v-hasPerm="['family:remote:broadband_3_4:itv_1_2']">
-                      <el-dropdown-item divided
-                        >宽带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
-                      >
-                    </div>
-                    <div v-hasPerm="['family:remote:broadband_1_3_4:itv_2']">
-                      <el-dropdown-item divided
-                        >宽带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
-                      >
-                    </div>
-                    <div v-hasPerm="['family:remote:broadband_1_3:itv_2']">
-                      <el-dropdown-item divided
-                        >三合一终端宽带1、3口;ITV 2口</el-dropdown-item
-                      >
-                    </div>
-                    <div v-hasPerm="['family:remote:info:update']">
-                      <el-dropdown-item divided>通用信息修改</el-dropdown-item>
-                    </div>
-                  </el-scrollbar>
-                </el-dropdown-menu>
+            <el-popconfirm
+              width="220"
+              confirm-button-text="确认"
+              cancel-button-text="取消"
+              :icon="InfoFilled"
+              @confirm="unbindingLogicId"
+              icon-color="#626AEF"
+              title="确定解绑逻辑ID吗?"
+            >
+              <template #reference>
+                <el-button type="primary">解绑逻辑ID</el-button>
               </template>
-            </el-dropdown>
-          </div>
-        </el-descriptions-item>
-        <el-descriptions-item
-          label="其他操作"
-          label-align="left"
-          align="center"
-          label-class-name="my-label"
-          class-name="my-content"
-          width="150px"
-        >
-          {{ remote.devTypeNameDetail }}
-        </el-descriptions-item>
-      </el-descriptions>
-    </el-card>
+            </el-popconfirm>
+          </template>
+          <el-descriptions-item
+            label="AD编号"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ remote.devAdNo }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="设备PPPoE帐号"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ remote.devPppoe }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="设备序列号"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ remote.devVendorOui }}-{{ remote.devSno }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="设备类型和软件版本"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ remote.devVendorName }}&nbsp;{{ remote.devTypeName }}&nbsp;{{
+              remote.devHardVer
+            }}&nbsp;{{ remote.softVer }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="设备系统管理域"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ remote.domain }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="黑名单状态"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ remote.blacklist }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="电信维护帐号密码"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ remote.devRemark1 }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="逻辑ID"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ remote.userSnNo }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="安装次数"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ remote.useState }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="IP"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ remote.devIp }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="设备当前状态"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ remote.devStatus }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="客户类型"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ remote.customType }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="拨号方式"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ remote.conType }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="最近一次开机时间"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ remote.devOnlineTime }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="设备网络侧接口"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ remote.devAccessType }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="设备类型"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ remote.devTypeNameDetail }}
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="远程操作"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            <div>
+              <el-dropdown split-button placement="right">
+                远程操作列表
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-scrollbar height="300">
+                      <div v-hasPerm="['family:remote:parameter:tree']">
+                        <el-dropdown-item>设备参数树浏览</el-dropdown-item>
+                      </div>
+                      <div v-hasPerm="['family:remote:ping:test']">
+                        <el-dropdown-item divided
+                          >设备Ping测试</el-dropdown-item
+                        >
+                      </div>
+                      <div v-hasPerm="['family:remote:profiles:upload']">
+                        <el-dropdown-item divided
+                          >设备配置文件上传
+                        </el-dropdown-item>
+                      </div>
+                      <div v-hasPerm="['family:remote:terminal:log_file']">
+                        <el-dropdown-item divided
+                          >获取设备终端日志文件
+                        </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
+                        >
+                      </div>
+                      <div v-hasPerm="['family:remote:profiles:issued']">
+                        <el-dropdown-item divided
+                          >设备厂商配置文件下发
+                        </el-dropdown-item>
+                      </div>
+                      <div v-hasPerm="['family:remote:full_service:issued']">
+                        <el-dropdown-item divided
+                          >设备全业务配置下发
+                        </el-dropdown-item>
+                      </div>
+                      <div v-hasPerm="['family:remote:soft_ver:upgrade']">
+                        <el-dropdown-item divided
+                          >设备软件版本升级
+                        </el-dropdown-item>
+                      </div>
+                      <div v-hasPerm="['family:remote:loop_back:diagnosis']">
+                        <el-dropdown-item divided
+                          >ATMF5Loopback诊断
+                        </el-dropdown-item>
+                      </div>
+                      <div v-hasPerm="['family:remote:dsl_loop:diagnosis']">
+                        <el-dropdown-item divided>DslLoop诊断</el-dropdown-item>
+                      </div>
+                      <div v-hasPerm="['family:remote:dev:monitor']">
+                        <el-dropdown-item divided>设备监控</el-dropdown-item>
+                      </div>
+                      <div v-hasPerm="['family:remote:ida:diagnosis']">
+                        <el-dropdown-item divided>IAD诊断</el-dropdown-item>
+                      </div>
+                      <div v-hasPerm="['family:remote:service_port:binding']">
+                        <el-dropdown-item divided
+                          >修改业务端口绑定
+                        </el-dropdown-item>
+                      </div>
+                      <div v-hasPerm="['family:remote:terminal:registration']">
+                        <el-dropdown-item divided
+                          >开启终端注册页面
+                        </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
+                        >
+                      </div>
+                      <div v-hasPerm="['family:remote:iptv:multicast']">
+                        <el-dropdown-item divided
+                          >重置IPTV组播</el-dropdown-item
+                        >
+                      </div>
+                      <div v-hasPerm="['family:remote:node:customize']">
+                        <el-dropdown-item divided
+                          >自定义节点定制
+                        </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>
+                      </div>
+                      <div v-hasPerm="['family:remote:broadband_3_4:itv_1_2']">
+                        <el-dropdown-item divided
+                          >宽带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>
+                      </div>
+                      <div v-hasPerm="['family:remote:broadband_1_3_4:itv_2']">
+                        <el-dropdown-item divided
+                          >宽带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>
+                      </div>
+                      <div v-hasPerm="['family:remote:broadband_1_3:itv_2']">
+                        <el-dropdown-item divided
+                          >三合一终端宽带1、3口;ITV 2口
+                        </el-dropdown-item>
+                      </div>
+                      <div v-hasPerm="['family:remote:info:update']">
+                        <el-dropdown-item divided
+                          >通用信息修改</el-dropdown-item
+                        >
+                      </div>
+                    </el-scrollbar>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </el-descriptions-item>
+          <el-descriptions-item
+            label="其他操作"
+            label-align="left"
+            align="center"
+            label-class-name="my-label"
+            class-name="my-content"
+            width="150px"
+          >
+            {{ remote.devTypeNameDetail }}
+          </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);
diff --git a/src/views/family/operate/remote-operation/index.vue b/src/views/family/operate/remote-operation/index.vue
index 59b3e7e..06aaa92 100644
--- a/src/views/family/operate/remote-operation/index.vue
+++ b/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>