fix(frontend): 资源池问题修复_统计试图 TencentBlueKing#9347

dbm-ui/frontend/src/locales/zh-cn.json

@@ -4136,5 +4136,7 @@
   "主机回收": "主机回收",
   "版本升级：主从接入层和单节点采用原地升级，存储层小版本升级采用原地升级（注意：暂不支持一主多从），大版本需提供新机迁移方式执行。同一主机所有关联集群将一并同步升级": "版本升级：主从接入层和单节点采用原地升级，存储层小版本升级采用原地升级（注意：暂不支持一主多从），大版本需提供新机迁移方式执行。同一主机所有关联集群将一并同步升级",
   "仅新导入且无被申请、转移等使用事件的主机，可执行撤销导入": "仅新导入且无被申请、转移等使用事件的主机，可执行撤销导入",
+  "无规格类型的 IP 共 n 个": "无规格类型的 IP 共 {n} 个",
+  "跳转查看": "跳转查看",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/views/resource-manage/pool/components/summary-view/components/List.vue

@@ -12,6 +12,7 @@
         :data="allTableData"
         :dimension="dimension" />
     </div>
+    <Test class="mb-12"></Test>
     <BkLoading :loading="loading">
       <BkTable
         ref="tableRef"
@@ -102,6 +103,7 @@
   import DimensionSelect from './DimensionSelect.vue';
   import Export from './Export.vue';
   import SearchBox from './search-box/Index.vue';
+  import Test from './Test.vue';
 
   const { t } = useI18n();
   const router = useRouter();

dbm-ui/frontend/src/views/resource-manage/pool/components/summary-view/components/MultLineText.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="ip-mult-line-text">
+    <div
+      ref="rootRef"
+      class="ip-mult-line-text-wrapper">
+      <slot />
+      <div
+        ref="placeholderRef"
+        class="placeholder">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import type { Instance, SingleTarget } from 'tippy.js';
+
+  import { dbTippy } from '@common/tippy';
+
+  let tippyInst: Instance;
+
+  const rootRef = ref<HTMLElement>();
+  const placeholderRef = ref<HTMLElement>();
+
+  const calcShowExpand = () => {
+    nextTick(() => {
+      const { height: placeholderHeight } = placeholderRef.value!.getBoundingClientRect();
+
+      if (rootHeight < placeholderHeight) {
+        createTippyInst();
+      }
+    });
+  };
+  let rootHeight = 0;
+
+  const createTippyInst = () => {
+    const { width } = rootRef.value!.getBoundingClientRect();
+    tippyInst = dbTippy(rootRef.value as SingleTarget, {
+      appendTo: () => document.body,
+      arrow: true,
+      content: placeholderRef.value,
+      maxWidth: width,
+      zIndex: 999999,
+    });
+  };
+
+  const destroyTippyInst = () => {
+    if (tippyInst) {
+      tippyInst.hide();
+      tippyInst.unmount();
+      tippyInst.destroy();
+    }
+  };
+
+  onMounted(() => {
+    rootHeight = rootRef.value!.getBoundingClientRect().height;
+    calcShowExpand();
+  });
+
+  onBeforeUpdate(() => {
+    destroyTippyInst();
+    calcShowExpand();
+  });
+</script>
+<style lang="less">
+  .ip-mult-line-text {
+    .ip-mult-line-text-wrapper {
+      position: relative;
+      display: -webkit-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: normal;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+    }
+
+    .placeholder {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      z-index: -1;
+      word-break: normal;
+    }
+  }
+</style>

dbm-ui/frontend/src/views/resource-manage/pool/components/summary-view/components/Test.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="test">
+    <div class="test-title">{{ t('无规格类型的 IP 共 n 个', { n: 1 }) }}：</div>
+    <MultLineText>
+      {{ hostList.join('，') }}
+    </MultLineText>
+    <div>
+      <BkButton
+        v-bk-tooltips="t('复制')"
+        class="copy-button ml-4"
+        text
+        theme="primary"
+        @click="handleCopy">
+        <DbIcon type="copy" />
+      </BkButton>
+      <BkButton
+        v-bk-tooltips="t('跳转查看')"
+        class="link-button ml-4"
+        text
+        theme="primary"
+        @click="handleRedirect">
+        <DbIcon type="link" />
+      </BkButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+
+  // import type SummaryModel from '@services/model/db-resource/summary';
+  import { execCopy } from '@utils';
+
+  import MultLineText from './MultLineText.vue';
+
+  // interface Props {
+  // data: SummaryModel[];
+  // dimension: string;
+  // }
+
+  // defineProps<Props>();
+
+  const router = useRouter();
+  const { t } = useI18n();
+
+  const hostList = ['1.2.3.4', '5.5.6.4'];
+
+  const handleCopy = () => {
+    execCopy(hostList.join('\n'), t('复制成功，共n条', { n: hostList.length }));
+  };
+
+  const handleRedirect = () => {
+    router.push({
+      name: 'resourcePool',
+      params: {
+        page: 'host-list',
+      },
+      query: {
+        hosts: hostList.join(','),
+      },
+    });
+  };
+</script>
+
+<style lang="less" scoped>
+  .test {
+    display: flex;
+    padding: 8px 12px;
+    font-size: 12px;
+    background: #f0f1f5;
+    border-radius: 2px;
+
+    .test-title {
+      font-weight: 700;
+      color: #313238;
+    }
+
+    .copy-button {
+      font-size: 15px;
+    }
+
+    .link-button {
+      font-size: 14px;
+    }
+  }
+</style>