From 221c39995f72783f2c2e00220f4658c38a60c83e Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Mon, 17 Mar 2025 15:32:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=BD=BB=E9=87=8F=E7=89=88=E7=BB=88?=
 =?UTF-8?q?=E7=AB=AF=E5=9B=BA=E5=AE=9Aomc=E6=9C=AC=E6=9C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/hostList.vue                   |   0
 src/views/tool/terminal-more/index.vue        | 339 +++++++++++++++++
 src/views/tool/terminal/index.vue             | 353 +++---------------
 3 files changed, 391 insertions(+), 301 deletions(-)
 rename src/views/tool/{terminal => terminal-more}/components/hostList.vue (100%)
 create mode 100644 src/views/tool/terminal-more/index.vue

diff --git a/src/views/tool/terminal/components/hostList.vue b/src/views/tool/terminal-more/components/hostList.vue
similarity index 100%
rename from src/views/tool/terminal/components/hostList.vue
rename to src/views/tool/terminal-more/components/hostList.vue
diff --git a/src/views/tool/terminal-more/index.vue b/src/views/tool/terminal-more/index.vue
new file mode 100644
index 00000000..7f4c18cb
--- /dev/null
+++ b/src/views/tool/terminal-more/index.vue
@@ -0,0 +1,339 @@
+<script lang="ts" setup>
+import { PageContainer } from 'antdv-pro-layout';
+import { Modal } from 'ant-design-vue/es';
+import { useFullscreen } from '@vueuse/core';
+import { defineAsyncComponent, reactive, ref } from 'vue';
+import { parseDuration } from '@/utils/date-utils';
+import useI18n from '@/hooks/useI18n';
+const { t } = useI18n();
+const TerminalSSH = defineAsyncComponent(
+  () => import('@/components/TerminalSSH/index.vue')
+);
+const TerminalTelnet = defineAsyncComponent(
+  () => import('@/components/TerminalTelnet/index.vue')
+);
+const TerminalRedis = defineAsyncComponent(
+  () => import('@/components/TerminalRedis/index.vue')
+);
+const HostList = defineAsyncComponent(
+  () => import('./components/hostList.vue')
+);
+
+// 全屏
+const terminalCard = ref<HTMLElement | null>(null);
+const { isFullscreen, toggle } = useFullscreen(terminalCard);
+
+/**主机对象信息状态类型 */
+type HostStateType = {
+  /**显示主机列表 */
+  show: boolean;
+  /**加载等待 */
+  loading: boolean;
+  /**查询参数 */
+  params: {
+    pageNum: number;
+    pageSize: number;
+  };
+  /**数据总数 */
+  total: number;
+  data: Record<string, any>[];
+};
+
+/**主机对象信息状态 */
+const hostState: HostStateType = reactive({
+  show: false,
+  loading: false,
+  params: {
+    pageNum: 1,
+    pageSize: 20,
+  },
+  total: 0,
+  data: [],
+});
+
+/**连接主机 */
+function fnConnectHost(data: Record<string, any>) {
+  const id = `${Date.now()}`;
+  tabState.panes.push({
+    id,
+    status: false,
+    host: data,
+  });
+  tabState.activeKey = id;
+}
+
+/**标签对象信息状态类型 */
+type TabStateType = {
+  /**激活选中 */
+  activeKey: string;
+  /**页签数据 */
+  panes: {
+    id: string;
+    status: boolean;
+    host: Record<string, any>;
+    connectStamp?: string;
+  }[];
+};
+
+/**标签对象信息状态 */
+const tabState: TabStateType = reactive({
+  activeKey: '0',
+  panes: [
+    {
+      id: '0',
+      host: {
+        id: 0,
+        title: t('views.tool.terminal.start'),
+        type: '0',
+      },
+      status: true,
+    },
+  ],
+});
+
+/**
+ * 终端连接状态
+ * @param data 主机连接结果
+ */
+function fnTerminalConnect(data: Record<string, any>) {
+  const { id, timeStamp } = data;
+  const seconds = timeStamp / 1000;
+  // 获取当前项下标
+  const tab = tabState.panes.find(item => item.id === id);
+  if (tab) {
+    tab.status = true;
+    tab.connectStamp = parseDuration(seconds);
+  }
+}
+
+/**
+ * 终端关闭状态
+ * @param data 主机连接结果
+ */
+function fnTerminalClose(data: Record<string, any>) {
+  const { id } = data;
+  // 获取当前项下标
+  const tab = tabState.panes.find(item => item.id === id);
+  if (tab) {
+    tab.status = false;
+  }
+}
+
+/**
+ * 标签更多菜单项
+ * @param key 菜单key
+ */
+function fnTabMenu(key: string | number) {
+  // 刷新当前
+  if (key === 'reload') {
+    const tabIndex = tabState.panes.findIndex(
+      item => item.id === tabState.activeKey
+    );
+    if (tabIndex) {
+      const tab = tabState.panes[tabIndex];
+      Modal.confirm({
+        title: t('common.tipTitle'),
+        content: t('views.tool.terminal.reloadTip', {
+          num: `${tab.host.hostType} - ${tab.host.title}`,
+        }),
+        onOk() {
+          tabState.panes.splice(tabIndex, 1);
+          tab.host && fnConnectHost(tab.host);
+        },
+      });
+    }
+  }
+  // 关闭当前
+  if (key === 'current') {
+    fnTabClose(tabState.activeKey);
+  }
+  // 关闭其他
+  if (key === 'other') {
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: t('views.tool.terminal.otherTip'),
+      onOk() {
+        hostState.show = false;
+        tabState.panes = tabState.panes.filter(
+          tab => tab.id === '0' || tab.id === tabState.activeKey
+        );
+        tabState.activeKey = tabState.activeKey;
+      },
+    });
+  }
+  // 关闭全部
+  if (key === 'all') {
+    Modal.confirm({
+      title: t('common.tipTitle'),
+      content: t('views.tool.terminal.allTip'),
+      onOk() {
+        hostState.show = false;
+        tabState.panes.splice(1);
+        tabState.activeKey = '0';
+      },
+    });
+  }
+}
+
+/**
+ * 导航标签关闭
+ * @param id 标签的key
+ */
+function fnTabClose(id: string) {
+  if (isFullscreen.value) toggle();
+
+  // 获取当前项下标
+  const tabIndex = tabState.panes.findIndex(tab => tab.id === id);
+  if (tabIndex === -1) return;
+  const item = tabState.panes[tabIndex];
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('views.tool.terminal.closeTip', {
+      num: `${item.host.hostType.toUpperCase()} - ${item.host.title}`,
+    }),
+    onOk() {
+      tabState.panes.splice(tabIndex, 1);
+      // 激活前一项标签
+      tabState.activeKey = tabState.panes[tabIndex - 1].id;
+    },
+  });
+}
+</script>
+
+<template>
+  <PageContainer>
+    <a-card
+      :bordered="false"
+      size="small"
+      :body-style="{ padding: '12px' }"
+      ref="terminalCard"
+    >
+      <a-tabs
+        class="terminal-tabs"
+        hide-add
+        size="small"
+        tab-position="top"
+        type="editable-card"
+        :tab-bar-gutter="8"
+        :tab-bar-style="{ margin: '0' }"
+        v-model:activeKey="tabState.activeKey"
+        @edit="(id:any) => fnTabClose(id)"
+      >
+        <a-tab-pane
+          v-for="pane in tabState.panes"
+          :key="pane.id"
+          :closable="pane.id !== '0'"
+        >
+          <template #tab>
+            <a-badge
+              :status="pane.status ? 'success' : 'error'"
+              :text="pane.host.title"
+            />
+          </template>
+
+          <div class="pane-box">
+            <!-- 非开始页的ssh主机 -->
+            <TerminalSSH
+              v-if="pane.id !== '0' && pane.host.hostType === 'ssh'"
+              :id="pane.id"
+              :hostId="pane.host.id"
+              @connect="fnTerminalConnect"
+              @close="fnTerminalClose"
+            >
+            </TerminalSSH>
+
+            <!-- 非开始页的telnet主机 -->
+            <TerminalTelnet
+              v-if="pane.id !== '0' && pane.host.hostType === 'telnet'"
+              :id="pane.id"
+              :hostId="pane.host.id"
+              init-cmd="help"
+              :disable="true"
+              @connect="fnTerminalConnect"
+              @close="fnTerminalClose"
+            >
+            </TerminalTelnet>
+
+            <!-- 非开始页的redis主机 -->
+            <TerminalRedis
+              v-if="pane.id !== '0' && pane.host.hostType === 'redis'"
+              :id="pane.id"
+              :hostId="pane.host.id"
+              @connect="fnTerminalConnect"
+              @close="fnTerminalClose"
+            >
+            </TerminalRedis>
+
+            <!-- 开始页 -->
+            <div v-if="pane.id === '0'">
+              <!-- 主机列表 -->
+              <HostList
+                v-show="tabState.activeKey === '0'"
+                @modal="() => (isFullscreen ? toggle() : null)"
+                @link="fnConnectHost"
+              ></HostList>
+            </div>
+          </div>
+        </a-tab-pane>
+
+        <template #rightExtra>
+          <a-space :size="8" align="center">
+            <a-tooltip placement="topRight">
+              <template #title>
+                {{ t('loayouts.rightContent.fullscreen') }}
+              </template>
+              <a-button
+                type="default"
+                shape="circle"
+                size="small"
+                style="color: inherit"
+                @click="toggle"
+              >
+                <template #icon>
+                  <FullscreenExitOutlined v-if="isFullscreen" />
+                  <FullscreenOutlined v-else />
+                </template>
+              </a-button>
+            </a-tooltip>
+            <!-- 非开始页的更多操作 -->
+            <div v-show="tabState.activeKey !== '0'">
+              <a-tooltip placement="topRight">
+                <template #title>
+                  {{ t('views.tool.terminal.more') }}
+                </template>
+                <a-dropdown trigger="click" placement="bottomRight">
+                  <a-button type="ghost" shape="circle" size="small">
+                    <template #icon><EllipsisOutlined /></template>
+                  </a-button>
+                  <template #overlay>
+                    <a-menu @click="({ key }:any) => fnTabMenu(key)">
+                      <a-menu-item key="reload">
+                        {{ t('views.tool.terminal.reload') }}
+                      </a-menu-item>
+                      <a-menu-item key="current">
+                        {{ t('views.tool.terminal.current') }}
+                      </a-menu-item>
+                      <a-menu-item key="other">
+                        {{ t('views.tool.terminal.other') }}
+                      </a-menu-item>
+                      <a-menu-item key="all">
+                        {{ t('views.tool.terminal.all') }}
+                      </a-menu-item>
+                    </a-menu>
+                  </template>
+                </a-dropdown>
+              </a-tooltip>
+            </div>
+          </a-space>
+        </template>
+      </a-tabs>
+    </a-card>
+  </PageContainer>
+</template>
+
+<style lang="less" scoped>
+.pane-box {
+  height: calc(100vh - 200px);
+  overflow-x: hidden;
+}
+</style>
diff --git a/src/views/tool/terminal/index.vue b/src/views/tool/terminal/index.vue
index 7f4c18cb..dc0ee2b8 100644
--- a/src/views/tool/terminal/index.vue
+++ b/src/views/tool/terminal/index.vue
@@ -1,203 +1,76 @@
 <script lang="ts" setup>
 import { PageContainer } from 'antdv-pro-layout';
-import { Modal } from 'ant-design-vue/es';
-import { useFullscreen } from '@vueuse/core';
-import { defineAsyncComponent, reactive, ref } from 'vue';
-import { parseDuration } from '@/utils/date-utils';
-import useI18n from '@/hooks/useI18n';
-const { t } = useI18n();
+import { listNeHost } from '@/api/ne/neHost';
+import { defineAsyncComponent, onMounted, reactive } from 'vue';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 const TerminalSSH = defineAsyncComponent(
   () => import('@/components/TerminalSSH/index.vue')
 );
-const TerminalTelnet = defineAsyncComponent(
-  () => import('@/components/TerminalTelnet/index.vue')
-);
-const TerminalRedis = defineAsyncComponent(
-  () => import('@/components/TerminalRedis/index.vue')
-);
-const HostList = defineAsyncComponent(
-  () => import('./components/hostList.vue')
-);
-
-// 全屏
-const terminalCard = ref<HTMLElement | null>(null);
-const { isFullscreen, toggle } = useFullscreen(terminalCard);
 
 /**主机对象信息状态类型 */
 type HostStateType = {
-  /**显示主机列表 */
-  show: boolean;
   /**加载等待 */
   loading: boolean;
   /**查询参数 */
   params: {
-    pageNum: number;
-    pageSize: number;
+    /**主机类型 */
+    hostType: 'ssh';
+    /**分组 */
+    groupId: '1';
+    /**名称 */
+    title: 'OMC';
+    /**当前页数 */
+    pageNum: 1;
+    /**每页条数 */
+    pageSize: 10;
+    sortField: 'createTime';
+    sortOrder: 'desc';
   };
-  /**数据总数 */
-  total: number;
-  data: Record<string, any>[];
+  /**OMC主机 */
+  host: Record<string, any>;
 };
 
 /**主机对象信息状态 */
 const hostState: HostStateType = reactive({
-  show: false,
   loading: false,
   params: {
+    /**主机类型 */
+    hostType: 'ssh',
+    /**分组 */
+    groupId: '1',
+    /**名称 */
+    title: 'OMC',
+    /**当前页数 */
     pageNum: 1,
-    pageSize: 20,
+    /**每页条数 */
+    pageSize: 10,
+    sortField: 'createTime',
+    sortOrder: 'desc',
   },
-  total: 0,
-  data: [],
+  host: {},
 });
 
-/**连接主机 */
-function fnConnectHost(data: Record<string, any>) {
-  const id = `${Date.now()}`;
-  tabState.panes.push({
-    id,
-    status: false,
-    host: data,
-  });
-  tabState.activeKey = id;
+/**查询信息列表, pageNum初始页数 */
+function fnGetList() {
+  hostState.loading = true;
+  listNeHost(hostState.params)
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        const { total, rows } = res.data;
+        if (total > 0) {
+          hostState.host = rows[0];
+        }
+      }
+    })
+    .finally(() => {
+      hostState.loading = false;
+    });
 }
 
-/**标签对象信息状态类型 */
-type TabStateType = {
-  /**激活选中 */
-  activeKey: string;
-  /**页签数据 */
-  panes: {
-    id: string;
-    status: boolean;
-    host: Record<string, any>;
-    connectStamp?: string;
-  }[];
-};
-
-/**标签对象信息状态 */
-const tabState: TabStateType = reactive({
-  activeKey: '0',
-  panes: [
-    {
-      id: '0',
-      host: {
-        id: 0,
-        title: t('views.tool.terminal.start'),
-        type: '0',
-      },
-      status: true,
-    },
-  ],
+onMounted(() => {
+  // 获取列表数据
+  fnGetList();
 });
-
-/**
- * 终端连接状态
- * @param data 主机连接结果
- */
-function fnTerminalConnect(data: Record<string, any>) {
-  const { id, timeStamp } = data;
-  const seconds = timeStamp / 1000;
-  // 获取当前项下标
-  const tab = tabState.panes.find(item => item.id === id);
-  if (tab) {
-    tab.status = true;
-    tab.connectStamp = parseDuration(seconds);
-  }
-}
-
-/**
- * 终端关闭状态
- * @param data 主机连接结果
- */
-function fnTerminalClose(data: Record<string, any>) {
-  const { id } = data;
-  // 获取当前项下标
-  const tab = tabState.panes.find(item => item.id === id);
-  if (tab) {
-    tab.status = false;
-  }
-}
-
-/**
- * 标签更多菜单项
- * @param key 菜单key
- */
-function fnTabMenu(key: string | number) {
-  // 刷新当前
-  if (key === 'reload') {
-    const tabIndex = tabState.panes.findIndex(
-      item => item.id === tabState.activeKey
-    );
-    if (tabIndex) {
-      const tab = tabState.panes[tabIndex];
-      Modal.confirm({
-        title: t('common.tipTitle'),
-        content: t('views.tool.terminal.reloadTip', {
-          num: `${tab.host.hostType} - ${tab.host.title}`,
-        }),
-        onOk() {
-          tabState.panes.splice(tabIndex, 1);
-          tab.host && fnConnectHost(tab.host);
-        },
-      });
-    }
-  }
-  // 关闭当前
-  if (key === 'current') {
-    fnTabClose(tabState.activeKey);
-  }
-  // 关闭其他
-  if (key === 'other') {
-    Modal.confirm({
-      title: t('common.tipTitle'),
-      content: t('views.tool.terminal.otherTip'),
-      onOk() {
-        hostState.show = false;
-        tabState.panes = tabState.panes.filter(
-          tab => tab.id === '0' || tab.id === tabState.activeKey
-        );
-        tabState.activeKey = tabState.activeKey;
-      },
-    });
-  }
-  // 关闭全部
-  if (key === 'all') {
-    Modal.confirm({
-      title: t('common.tipTitle'),
-      content: t('views.tool.terminal.allTip'),
-      onOk() {
-        hostState.show = false;
-        tabState.panes.splice(1);
-        tabState.activeKey = '0';
-      },
-    });
-  }
-}
-
-/**
- * 导航标签关闭
- * @param id 标签的key
- */
-function fnTabClose(id: string) {
-  if (isFullscreen.value) toggle();
-
-  // 获取当前项下标
-  const tabIndex = tabState.panes.findIndex(tab => tab.id === id);
-  if (tabIndex === -1) return;
-  const item = tabState.panes[tabIndex];
-  Modal.confirm({
-    title: t('common.tipTitle'),
-    content: t('views.tool.terminal.closeTip', {
-      num: `${item.host.hostType.toUpperCase()} - ${item.host.title}`,
-    }),
-    onOk() {
-      tabState.panes.splice(tabIndex, 1);
-      // 激活前一项标签
-      tabState.activeKey = tabState.panes[tabIndex - 1].id;
-    },
-  });
-}
 </script>
 
 <template>
@@ -205,135 +78,13 @@ function fnTabClose(id: string) {
     <a-card
       :bordered="false"
       size="small"
-      :body-style="{ padding: '12px' }"
-      ref="terminalCard"
+      :body-style="{ padding: '12px', height: 'calc(100vh - 200px)' }"
+      :loading="hostState.loading"
     >
-      <a-tabs
-        class="terminal-tabs"
-        hide-add
-        size="small"
-        tab-position="top"
-        type="editable-card"
-        :tab-bar-gutter="8"
-        :tab-bar-style="{ margin: '0' }"
-        v-model:activeKey="tabState.activeKey"
-        @edit="(id:any) => fnTabClose(id)"
-      >
-        <a-tab-pane
-          v-for="pane in tabState.panes"
-          :key="pane.id"
-          :closable="pane.id !== '0'"
-        >
-          <template #tab>
-            <a-badge
-              :status="pane.status ? 'success' : 'error'"
-              :text="pane.host.title"
-            />
-          </template>
-
-          <div class="pane-box">
-            <!-- 非开始页的ssh主机 -->
-            <TerminalSSH
-              v-if="pane.id !== '0' && pane.host.hostType === 'ssh'"
-              :id="pane.id"
-              :hostId="pane.host.id"
-              @connect="fnTerminalConnect"
-              @close="fnTerminalClose"
-            >
-            </TerminalSSH>
-
-            <!-- 非开始页的telnet主机 -->
-            <TerminalTelnet
-              v-if="pane.id !== '0' && pane.host.hostType === 'telnet'"
-              :id="pane.id"
-              :hostId="pane.host.id"
-              init-cmd="help"
-              :disable="true"
-              @connect="fnTerminalConnect"
-              @close="fnTerminalClose"
-            >
-            </TerminalTelnet>
-
-            <!-- 非开始页的redis主机 -->
-            <TerminalRedis
-              v-if="pane.id !== '0' && pane.host.hostType === 'redis'"
-              :id="pane.id"
-              :hostId="pane.host.id"
-              @connect="fnTerminalConnect"
-              @close="fnTerminalClose"
-            >
-            </TerminalRedis>
-
-            <!-- 开始页 -->
-            <div v-if="pane.id === '0'">
-              <!-- 主机列表 -->
-              <HostList
-                v-show="tabState.activeKey === '0'"
-                @modal="() => (isFullscreen ? toggle() : null)"
-                @link="fnConnectHost"
-              ></HostList>
-            </div>
-          </div>
-        </a-tab-pane>
-
-        <template #rightExtra>
-          <a-space :size="8" align="center">
-            <a-tooltip placement="topRight">
-              <template #title>
-                {{ t('loayouts.rightContent.fullscreen') }}
-              </template>
-              <a-button
-                type="default"
-                shape="circle"
-                size="small"
-                style="color: inherit"
-                @click="toggle"
-              >
-                <template #icon>
-                  <FullscreenExitOutlined v-if="isFullscreen" />
-                  <FullscreenOutlined v-else />
-                </template>
-              </a-button>
-            </a-tooltip>
-            <!-- 非开始页的更多操作 -->
-            <div v-show="tabState.activeKey !== '0'">
-              <a-tooltip placement="topRight">
-                <template #title>
-                  {{ t('views.tool.terminal.more') }}
-                </template>
-                <a-dropdown trigger="click" placement="bottomRight">
-                  <a-button type="ghost" shape="circle" size="small">
-                    <template #icon><EllipsisOutlined /></template>
-                  </a-button>
-                  <template #overlay>
-                    <a-menu @click="({ key }:any) => fnTabMenu(key)">
-                      <a-menu-item key="reload">
-                        {{ t('views.tool.terminal.reload') }}
-                      </a-menu-item>
-                      <a-menu-item key="current">
-                        {{ t('views.tool.terminal.current') }}
-                      </a-menu-item>
-                      <a-menu-item key="other">
-                        {{ t('views.tool.terminal.other') }}
-                      </a-menu-item>
-                      <a-menu-item key="all">
-                        {{ t('views.tool.terminal.all') }}
-                      </a-menu-item>
-                    </a-menu>
-                  </template>
-                </a-dropdown>
-              </a-tooltip>
-            </div>
-          </a-space>
-        </template>
-      </a-tabs>
+      <TerminalSSH :id="hostState.host.title" :hostId="hostState.host.id">
+      </TerminalSSH>
     </a-card>
   </PageContainer>
 </template>
 
-<style lang="less" scoped>
-.pane-box {
-  height: calc(100vh - 200px);
-  overflow-x: hidden;
-}
-</style>
+<style lang="less" scoped></style>