From 50158b5305226ec9049fe96a1ed8012e4406b0ce Mon Sep 17 00:00:00 2001
From: chenwenchang <479999519@qq.com>
Date: Tue, 3 Dec 2024 16:03:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E5=8D=95=E6=8D=AE=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E8=BF=AD=E4=BB=A3=5F1203=20#7190=20#=20Reviewed,=20tr?=
 =?UTF-8?q?ansaction=20id:=2025675?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dbm-ui/frontend/src/locales/zh-cn.json        |   1 +
 .../model/ticket/details/redis/index.ts       |   2 -
 .../model/ticket/details/redis/scaleDown.ts   |   3 -
 .../model/ticket/details/redis/scaleUp.ts     |   3 -
 .../model/ticket/details/redis/scaleUpdown.ts |   5 +
 .../page1/components/RenderSwitchMode.vue     |   2 +-
 .../pages/page1/components/Row.vue            |  21 +-
 .../cluster-type-update/pages/page1/Index.vue |   2 +
 .../common/cluster-deploy-plan/Index.vue      |   2 +-
 .../redis/ClusterShardNumUpdate.vue           | 195 +++++---------
 .../com-factory/redis/ClusterTypeUpdate.vue   | 237 ++++++------------
 .../com-factory/redis/ScaleUpdown.vue         | 147 +++++------
 .../redis/ClusterTypeUpdate.vue               | 191 --------------
 13 files changed, 232 insertions(+), 579 deletions(-)
 delete mode 100644 dbm-ui/frontend/src/services/model/ticket/details/redis/scaleDown.ts
 delete mode 100644 dbm-ui/frontend/src/services/model/ticket/details/redis/scaleUp.ts
 delete mode 100644 dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterTypeUpdate.vue

diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
index db35e16b74..2cedc5beae 100644
--- a/dbm-ui/frontend/src/locales/zh-cn.json
+++ b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3745,5 +3745,6 @@
   "强制实例下架：": "强制实例下架：",
   "Excel文件：": "Excel文件：",
   "不一致时间范围:": "不一致时间范围:",
+  "变更信息:": "变更信息:",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/redis/index.ts b/dbm-ui/frontend/src/services/model/ticket/details/redis/index.ts
index 7a303ee825..15171e5ccf 100644
--- a/dbm-ui/frontend/src/services/model/ticket/details/redis/index.ts
+++ b/dbm-ui/frontend/src/services/model/ticket/details/redis/index.ts
@@ -28,8 +28,6 @@ export * from './proxyOpen';
 export * from './proxyScaleDown';
 export * from './proxyScaleUp';
 export * from './purge';
-export * from './scaleDown';
-export * from './scaleUp';
 export * from './scaleUpdown';
 export * from './slotsMigrate';
 export * from './versionUpdateOnline';
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/redis/scaleDown.ts b/dbm-ui/frontend/src/services/model/ticket/details/redis/scaleDown.ts
deleted file mode 100644
index 72d8f5decf..0000000000
--- a/dbm-ui/frontend/src/services/model/ticket/details/redis/scaleDown.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import type { DetailBase } from '../common';
-
-export interface ScaleDown extends DetailBase {}
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/redis/scaleUp.ts b/dbm-ui/frontend/src/services/model/ticket/details/redis/scaleUp.ts
deleted file mode 100644
index e9362b8bb3..0000000000
--- a/dbm-ui/frontend/src/services/model/ticket/details/redis/scaleUp.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import type { DetailBase } from '../common';
-
-export interface ScaleUp extends DetailBase {}
diff --git a/dbm-ui/frontend/src/services/model/ticket/details/redis/scaleUpdown.ts b/dbm-ui/frontend/src/services/model/ticket/details/redis/scaleUpdown.ts
index 06defb9f76..f8ad5e985b 100644
--- a/dbm-ui/frontend/src/services/model/ticket/details/redis/scaleUpdown.ts
+++ b/dbm-ui/frontend/src/services/model/ticket/details/redis/scaleUpdown.ts
@@ -1,3 +1,4 @@
+import type RedisModel from '@services/model/redis/redis';
 import type { OnlineSwitchType } from '@services/types';
 
 import type { DetailBase, DetailClusters, DetailSpecs } from '../common';
@@ -22,6 +23,10 @@ export interface ScaleUpdown extends DetailBase {
         affinity: 'CROS_SUBZONE';
       };
     };
+    display_info: Pick<
+      RedisModel,
+      'cluster_stats' | 'cluster_spec' | 'cluster_shard_num' | 'cluster_capacity' | 'machine_pair_cnt'
+    >;
   }[];
   specs: DetailSpecs;
 }
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/RenderSwitchMode.vue b/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/RenderSwitchMode.vue
index e46820bf03..6b538b5d6b 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/RenderSwitchMode.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/RenderSwitchMode.vue
@@ -41,7 +41,7 @@
   }
 
   interface Exposes {
-    getValue: () => Promise<string>;
+    getValue: () => Promise<OnlineSwitchType>;
   }
 
   const props = withDefaults(defineProps<Props>(), {
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/Row.vue b/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/Row.vue
index 31c188be06..c80ec87f28 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/Row.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/capacity-change/pages/page1/components/Row.vue
@@ -123,6 +123,10 @@
         affinity: AffinityType; // 暂时固定 'CROS_SUBZONE',
       };
     };
+    display_info: Pick<
+      RedisModel,
+      'cluster_stats' | 'cluster_spec' | 'cluster_shard_num' | 'cluster_capacity' | 'machine_pair_cnt'
+    >;
   }
 
   // 创建表格数据
@@ -166,6 +170,13 @@
   const targetCapacityRef = ref<InstanceType<typeof RenderTargetCapacity>>();
   const switchModeRef = ref<InstanceType<typeof RenderSwitchMode>>();
   const localTargetVersion = ref<string>('');
+  const displayInfo = ref<InfoItem['display_info']>({
+    cluster_stats: {},
+    cluster_spec: {},
+    cluster_shard_num: 0,
+    cluster_capacity: 0,
+    machine_pair_cnt: 0,
+  } as InfoItem['display_info']);
 
   const handleTargetVersionChange = (value: string) => {
     localTargetVersion.value = value;
@@ -173,6 +184,13 @@
 
   const handleInputFinish = (value: RedisModel) => {
     emits('clusterInputFinish', value);
+    displayInfo.value = {
+      cluster_stats: value.cluster_stats,
+      cluster_spec: value.cluster_spec,
+      cluster_shard_num: value.cluster_shard_num,
+      cluster_capacity: value.cluster_capacity,
+      machine_pair_cnt: value.machine_pair_cnt,
+    };
   };
 
   const handleAppend = () => {
@@ -185,7 +203,7 @@
 
   defineExpose<Exposes>({
     async getValue() {
-      await clusterRef.value!.getValue(true);
+      await clusterRef.value!.getValue();
       return Promise.all([
         versionRef.value!.getValue(),
         switchModeRef.value!.getValue(),
@@ -198,6 +216,7 @@
           bk_cloud_id: props.data.bkCloudId,
           online_switch_type: switchMode,
           ...targetCapacity,
+          display_info: displayInfo.value,
         };
       });
     },
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/Index.vue
index ba4d440c3b..159d91bbe7 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/cluster-type-update/pages/page1/Index.vue
@@ -279,6 +279,8 @@
     const newList = list.reduce((result, item) => {
       const domain = item.master_domain;
       if (!domainMemo[domain]) {
+        console.log(item, 'item');
+
         const row = generateTableRow(item);
         result.push(row);
         domainMemo[domain] = true;
diff --git a/dbm-ui/frontend/src/views/db-manage/redis/common/cluster-deploy-plan/Index.vue b/dbm-ui/frontend/src/views/db-manage/redis/common/cluster-deploy-plan/Index.vue
index 6aa9c88d78..0a01188723 100644
--- a/dbm-ui/frontend/src/views/db-manage/redis/common/cluster-deploy-plan/Index.vue
+++ b/dbm-ui/frontend/src/views/db-manage/redis/common/cluster-deploy-plan/Index.vue
@@ -485,7 +485,7 @@
         machine_pair: specInfo.count
       })
       Object.assign(capacityInfo, {
-        current: specInfo.totalCapcity,
+        current: props.data.capacity.total,
         future: specInfo.totalCapcity
       })
     }
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/redis/ClusterShardNumUpdate.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/redis/ClusterShardNumUpdate.vue
index 57063c38fc..cfd2e84372 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/redis/ClusterShardNumUpdate.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/redis/ClusterShardNumUpdate.vue
@@ -12,162 +12,99 @@
 -->
 
 <template>
-  <div
-    class="ticket-details-item"
-    style="align-items: flex-start">
-    <span class="ticket-details-item-label">{{ t('变更信息') }}：</span>
-    <span class="ticket-details-item-value">
-      <BkLoading :loading="loading">
-        <DbOriginalTable
-          :columns="columns"
-          :data="tableData" />
-      </BkLoading>
-    </span>
-  </div>
-
-  <div class="ticket-details-list">
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('校验与修复类型') }}：</span>
-      <span class="ticket-details-item-value">
-        {{ repairAndVerifyTypesMap[ticketDetails.details.data_check_repair_setting.type] }}
-      </span>
-    </div>
-    <div
+  <BkTable
+    :data="ticketDetails.details.infos"
+    show-overflow-tooltip>
+    <BkTableColumn
+      :label="t('源集群')"
+      :min-width="180">
+      <template #default="{ data }: { data: RowData }">
+        {{ ticketDetails.details.clusters[data.src_cluster].immute_domain }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn :label="t('架构版本')">
+      <template #default="{ data }: { data: RowData }">
+        {{ ticketDetails.details.clusters[data.src_cluster].cluster_type_name }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn
+      :label="t('当前集群容量/QPS')"
+      :min-width="150">
+      <template #default="{ data }: { data: RowData }">
+        {{
+          `${data.capacity}G_${ticketDetails.details.specs[data.resource_spec.backend_group.spec_id].qps.max}/s(${data.current_shard_num}片)`
+        }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn
+      field="capacity"
+      :label="t('当前容量需求')" />
+    <BkTableColumn
+      field="future_capacity"
+      :label="t('未来容量需求')" />
+    <BkTableColumn
+      :label="t('部署方案')"
+      :min-width="150">
+      <template #default="{ data }: { data: RowData }">
+        {{ ticketDetails.details.specs[data.resource_spec.backend_group.spec_id].name }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn
+      field="db_version"
+      :label="t('版本')" />
+    <BkTableColumn :label="t('切换模式')">
+      <template #default="{ data }: { data: RowData }">
+        {{ data.online_switch_type === 'user_confirm' ? t('需人工确认') : t('无需确认') }}
+      </template>
+    </BkTableColumn>
+  </BkTable>
+  <InfoList>
+    <InfoItem :label="t('校验与修复类型:')">
+      {{ repairAndVerifyTypesMap[ticketDetails.details.data_check_repair_setting.type] }}
+    </InfoItem>
+    <InfoItem
       v-if="ticketDetails.details.data_check_repair_setting.type !== 'no_check_no_repair'"
-      class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('校验与修复类型') }}：</span>
-      <span class="ticket-details-item-value">
-        {{ repairAndVerifyFrequencyMap[ticketDetails.details.data_check_repair_setting.execution_frequency] }}
-      </span>
-    </div>
-  </div>
+      :label="t('校验与修复频率设置:')">
+      {{ repairAndVerifyFrequencyMap[ticketDetails.details.data_check_repair_setting.execution_frequency] }}
+    </InfoItem>
+  </InfoList>
 </template>
 
-<script setup lang="tsx">
+<script setup lang="ts">
   import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
 
-  import RedisModel from '@services/model/redis/redis';
   import TicketModel, { type Redis } from '@services/model/ticket/ticket';
-  import { getRedisListByBizId } from '@services/source/redis';
 
   import { TicketTypes } from '@common/const';
 
   import { repairAndVerifyFrequencyList, repairAndVerifyTypeList } from '@views/db-manage/redis/common/const';
 
+  import InfoList, { Item as InfoItem } from '../components/info-list/Index.vue';
+
   interface Props {
-    ticketDetails: TicketModel<Redis.ClusterShardNumUpdate>
+    ticketDetails: TicketModel<Redis.ClusterShardNumUpdate>;
   }
 
-  interface RowData {
-    deployPlan: string,
-    capacity: number,
-    futureCapacity: number,
-    dbVersion: string,
-    switchMode: string,
-  }
+  type RowData = Props['ticketDetails']['details']['infos'][number];
 
-  const props = defineProps<Props>();
+  defineProps<Props>();
 
   defineOptions({
     name: TicketTypes.REDIS_CLUSTER_SHARD_NUM_UPDATE,
-    inheritAttrs: false
-  })
+    inheritAttrs: false,
+  });
 
   const { t } = useI18n();
 
-  const tableData = ref<RowData[]>([]);
-
-  const { infos } = props.ticketDetails.details;
-
-  const columns = [
-    {
-      label: t('源集群'),
-      field: 'clusterName',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('架构版本'),
-      field: 'clusterTypeName',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('当前集群容量/QPS'),
-      field: 'currentSepc',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('当前容量需求'),
-      field: 'capacity',
-      showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => <span>{data.capacity}G</span>,
-    },
-    {
-      label: t('未来容量需求'),
-      field: 'futureCapacity',
-      showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => <span>{data.futureCapacity}G</span>,
-    },
-    {
-      label: t('部署方案'),
-      field: 'deployPlan',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('版本'),
-      field: 'dbVersion',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('切换模式'),
-      field: 'switchMode',
-      showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => <span>{data.switchMode === 'user_confirm' ? t('需人工确认') : t('无需确认')}</span>,
-    },
-  ];
-
   const repairAndVerifyTypesMap = generateMap(repairAndVerifyTypeList);
 
   const repairAndVerifyFrequencyMap = generateMap(repairAndVerifyFrequencyList);
 
-  const { loading } = useRequest(getRedisListByBizId, {
-    defaultParams: [{
-      bk_biz_id: props.ticketDetails.bk_biz_id,
-      offset: 0,
-      limit: -1,
-    }],
-    onSuccess: async (result) => {
-      if (result.results.length < 1) {
-        return;
-      }
-
-      const clusterMap = result.results.reduce((obj, item) => {
-        Object.assign(obj, { [item.id]: item });
-        return obj;
-      }, {} as Record<string, RedisModel>);
-      tableData.value = infos.map((item) => {
-        const currentCluster = clusterMap[item.src_cluster];
-        const specConfig = currentCluster.cluster_spec;
-        return ({
-          clusterName: currentCluster.master_domain,
-          clusterType: currentCluster.cluster_spec.spec_cluster_type,
-          clusterTypeName: currentCluster.cluster_type_name,
-          currentSepc: `${currentCluster.cluster_capacity}G_${specConfig.qps.max}/s（${item.current_shard_num} 分片）`,
-          deployPlan: `${item.cluster_shard_num} 分片`,
-          dbVersion: item.db_version,
-          switchMode: item.online_switch_type,
-          capacity: item.capacity,
-          futureCapacity: item.future_capacity,
-        });
-      });
-    },
-  });
-
   // 生成映射表
-  function generateMap(arr: { label: string, value: string}[]) {
-    return arr.reduce((obj, item) => {
+  function generateMap(arr: { label: string; value: string }[]) {
+    return arr.reduce<Record<string, string>>((obj, item) => {
       Object.assign(obj, { [item.value]: item.label });
       return obj;
-    }, {} as Record<string, string>);
+    }, {});
   }
 </script>
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/redis/ClusterTypeUpdate.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/redis/ClusterTypeUpdate.vue
index 2d51ca6c13..a1b71d38e6 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/redis/ClusterTypeUpdate.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/redis/ClusterTypeUpdate.vue
@@ -12,194 +12,107 @@
 -->
 
 <template>
-  <div>
-    <div
-      class="ticket-details-item"
-      style="align-items: flex-start">
-      <span class="ticket-details-item-label">{{ t('变更信息') }}：</span>
-      <span class="ticket-details-item-value">
-        <BkLoading :loading="loading">
-          <DbOriginalTable
-            :columns="columns"
-            :data="tableData" />
-        </BkLoading>
-      </span>
-    </div>
-    <div class="ticket-details-list">
-      <div class="ticket-details-item">
-        <span class="ticket-details-item-label">{{ t('校验与修复类型') }}：</span>
-        <span class="ticket-details-item-value">
-          {{ repairAndVerifyTypesMap[ticketDetails.details.data_check_repair_setting.type] }}
-        </span>
-      </div>
-      <div
-        v-if="ticketDetails.details.data_check_repair_setting.type !== 'no_check_no_repair'"
-        class="ticket-details-item">
-        <span class="ticket-details-item-label">{{ t('校验与修复频率设置') }}：</span>
-        <span class="ticket-details-item-value">
-          {{ repairAndVerifyFrequencyMap[ticketDetails.details.data_check_repair_setting.execution_frequency] }}
-        </span>
-      </div>
-    </div>
-  </div>
+  <BkTable
+    :data="ticketDetails.details.infos"
+    show-overflow-tooltip>
+    <BkTableColumn
+      :label="t('源集群')"
+      :min-width="180">
+      <template #default="{ data }: { data: RowData }">
+        {{ ticketDetails.details.clusters[data.src_cluster].immute_domain }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn :label="t('架构版本')">
+      <template #default="{ data }: { data: RowData }">
+        {{ ticketDetails.details.clusters[data.src_cluster].cluster_type_name }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn
+      field="current_cluster_type"
+      :label="t('原集群类型')"
+      :min-width="130" />
+    <BkTableColumn
+      field="target_cluster_type"
+      :label="t('目标集群类型')"
+      :min-width="130" />
+    <BkTableColumn
+      :label="t('当前集群容量/QPS')"
+      :min-width="150">
+      <template #default="{ data }: { data: RowData }">
+        {{
+          `${data.capacity}G_${ticketDetails.details.specs[data.resource_spec.backend_group.spec_id].qps.max}/s(${data.current_shard_num}片)`
+        }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn
+      field="capacity"
+      :label="t('当前容量需求')" />
+    <BkTableColumn
+      field="future_capacity"
+      :label="t('未来容量需求')" />
+    <BkTableColumn
+      :label="t('部署方案')"
+      :min-width="150">
+      <template #default="{ data }: { data: RowData }">
+        {{ ticketDetails.details.specs[data.resource_spec.backend_group.spec_id].name }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn
+      field="db_version"
+      :label="t('版本')" />
+    <BkTableColumn :label="t('切换模式')">
+      <template #default="{ data }: { data: RowData }">
+        {{ data.online_switch_type === 'user_confirm' ? t('需人工确认') : t('无需确认') }}
+      </template>
+    </BkTableColumn>
+  </BkTable>
+  <InfoList>
+    <InfoItem :label="t('校验与修复类型:')">
+      {{ repairAndVerifyTypesMap[ticketDetails.details.data_check_repair_setting.type] }}
+    </InfoItem>
+    <InfoItem
+      v-if="ticketDetails.details.data_check_repair_setting.type !== 'no_check_no_repair'"
+      :label="t('校验与修复频率设置:')">
+      {{ repairAndVerifyFrequencyMap[ticketDetails.details.data_check_repair_setting.execution_frequency] }}
+    </InfoItem>
+  </InfoList>
 </template>
 
-<script setup lang="tsx">
+<script setup lang="ts">
   import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
 
-  import RedisModel from '@services/model/redis/redis';
-  import ResourceSpecModel from '@services/model/resource-spec/resourceSpec';
   import TicketModel, { type Redis } from '@services/model/ticket/ticket';
-  import { getResourceSpecList } from '@services/source/dbresourceSpec';
-  import { getRedisListByBizId } from '@services/source/redis';
 
   import { TicketTypes } from '@common/const';
 
-  import { repairAndVerifyFrequencyList, repairAndVerifyTypeList, specClusterMachineMap } from '@views/db-manage/redis/common/const'
+  import { repairAndVerifyFrequencyList, repairAndVerifyTypeList } from '@views/db-manage/redis/common/const';
+
+  import InfoList, { Item as InfoItem } from '../components/info-list/Index.vue';
 
   interface Props {
-    ticketDetails: TicketModel<Redis.ClusterTypeUpdate>
+    ticketDetails: TicketModel<Redis.ClusterTypeUpdate>;
   }
 
-  interface RowData {
-    clusterName: string,
-    currentSepc: string,
-    srcClusterType: string,
-    targetClusterType: string,
-    deployPlan: string,
-    dbVersion: string,
-    switchMode: string,
-    capacity: number,
-    futureCapacity: number,
-  }
+  type RowData = Props['ticketDetails']['details']['infos'][number];
 
-  const props = defineProps<Props>();
+  defineProps<Props>();
 
   defineOptions({
     name: TicketTypes.REDIS_CLUSTER_TYPE_UPDATE,
     inheritAttrs: false,
-  })
+  });
 
   const { t } = useI18n();
 
-  const tableData = ref<RowData[]>([]);
-
-  const { clusters, infos } = props.ticketDetails.details;
-
-  const columns = [
-    {
-      label: t('源集群'),
-      field: 'clusterName',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('架构版本'),
-      field: 'clusterTypeName',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('原集群类型'),
-      field: 'srcClusterType',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('目标集群类型'),
-      field: 'targetClusterType',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('当前集群容量/QPS'),
-      field: 'currentSepc',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('当前容量需求'),
-      field: 'capacity',
-      showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => <span>{data.capacity}G</span>,
-    },
-    {
-      label: t('未来容量需求'),
-      field: 'futureCapacity',
-      showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => <span>{data.futureCapacity}G</span>,
-    },
-    {
-      label: t('部署方案'),
-      field: 'deployPlan',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('版本'),
-      field: 'dbVersion',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('切换模式'),
-      field: 'switchMode',
-      showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => <span>{data.switchMode === 'user_confirm' ? t('需人工确认') : t('无需确认')}</span>,
-    },
-  ];
-
   const repairAndVerifyTypesMap = generateMap(repairAndVerifyTypeList);
 
   const repairAndVerifyFrequencyMap = generateMap(repairAndVerifyFrequencyList);
 
-  const { loading } = useRequest(getRedisListByBizId, {
-    defaultParams: [{
-      bk_biz_id: props.ticketDetails.bk_biz_id,
-      offset: 0,
-      limit: -1,
-    }],
-    onSuccess: async (result) => {
-      if (result.results.length < 1) {
-        return;
-      }
-      const clusterMap = result.results.reduce((obj, item) => {
-        Object.assign(obj, { [item.id]: item });
-        return obj;
-      }, {} as Record<string, RedisModel>);
-
-      // 避免重复查询
-      const clusterTypes = [...new Set(infos.map(item => item.target_cluster_type))];
-      const sepcMap: Record<string, ResourceSpecModel[]> = {};
-
-      await Promise.all(clusterTypes.map(async (type) => {
-        const ret = await getResourceSpecList({
-          spec_cluster_type: type,
-          limit: -1,
-          offset: 0,
-        });
-        sepcMap[type] = ret.results;
-      }));
-      loading.value = false;
-      tableData.value = infos.map((item) => {
-        const currentCluster = clusterMap[item.src_cluster];
-        const specConfig = currentCluster.cluster_spec;
-        const targetSepcPlan = sepcMap[item.target_cluster_type].filter(row => row.spec_id === item.resource_spec.backend_group.spec_id);
-        return ({
-          clusterName: currentCluster.master_domain,
-          srcClusterType: specClusterMachineMap[clusters[item.src_cluster].cluster_type],
-          clusterTypeName: clusters[item.src_cluster].cluster_type_name,
-          currentSepc: `${currentCluster.cluster_capacity}G_${specConfig.qps.max}/s（${item.current_shard_num} 分片）`,
-          deployPlan: targetSepcPlan.length > 0 ? targetSepcPlan[0].spec_name : '',
-          targetClusterType: specClusterMachineMap[item.target_cluster_type],
-          dbVersion: item.db_version,
-          switchMode: item.online_switch_type,
-          capacity: item.capacity,
-          futureCapacity: item.future_capacity,
-        });
-      });
-    },
-  });
-
   // 生成映射表
-  function generateMap(arr: { label: string, value: string}[]) {
-    return arr.reduce((obj, item) => {
+  function generateMap(arr: { label: string; value: string }[]) {
+    return arr.reduce<Record<string, string>>((obj, item) => {
       Object.assign(obj, { [item.value]: item.label });
       return obj;
-    }, {} as Record<string, string>);
+    }, {});
   }
 </script>
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/redis/ScaleUpdown.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/redis/ScaleUpdown.vue
index 616330ce03..36488d1b01 100644
--- a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/redis/ScaleUpdown.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/task-info/com-factory/redis/ScaleUpdown.vue
@@ -12,57 +12,56 @@
 -->
 
 <template>
-  <BkLoading :loading="loading">
-    <BkTable
-      :data="tableData"
-      show-overflow-tooltip>
-      <BkTableColumn
-        field="master_domain"
-        :label="t('目标集群')">
-      </BkTableColumn>
-      <BkTableColumn
-        field="cluster_type_name"
-        :label="t('架构版本')">
-      </BkTableColumn>
-      <BkTableColumn
-        field="db_version"
-        :label="t('Redis版本')">
-      </BkTableColumn>
-      <BkTableColumn
-        :label="t('当前容量')"
-        :min-width="240">
-        <template #default="{ data }: { data: RowData }">
-          <TableGroupContent
-            v-if="data"
-            :columns="getCurrentColunms(data)" />
-        </template>
-      </BkTableColumn>
-      <BkTableColumn
-        :label="t('目标容量')"
-        :min-width="370">
-        <template #default="{ data }: { data: RowData }">
-          <TableGroupContent
-            v-if="data"
-            :columns="getTargetColunms(data)" />
-        </template>
-      </BkTableColumn>
-      <BkTableColumn :label="t('切换模式')">
-        <template #default="{ data }: { data: RowData }">
-          {{ data.online_switch_type === 'user_confirm' ? t('需人工确认') : t('无需确认') }}
-        </template>
-      </BkTableColumn>
-    </BkTable>
-  </BkLoading>
+  <BkTable
+    :data="ticketDetails.details.infos"
+    show-overflow-tooltip>
+    <BkTableColumn
+      :label="t('源集群')"
+      :min-width="180">
+      <template #default="{ data }: { data: RowData }">
+        {{ ticketDetails.details.clusters[data.cluster_id].immute_domain }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn :label="t('架构版本')">
+      <template #default="{ data }: { data: RowData }">
+        {{ ticketDetails.details.clusters[data.cluster_id].cluster_type_name }}
+      </template>
+    </BkTableColumn>
+    <BkTableColumn
+      field="db_version"
+      :label="t('Redis版本')">
+    </BkTableColumn>
+    <BkTableColumn
+      :label="t('当前容量')"
+      :min-width="240">
+      <template #default="{ data }: { data: RowData }">
+        <TableGroupContent
+          v-if="data"
+          :columns="getCurrentColunms(data)" />
+      </template>
+    </BkTableColumn>
+    <BkTableColumn
+      :label="t('目标容量')"
+      :min-width="370">
+      <template #default="{ data }: { data: RowData }">
+        <TableGroupContent
+          v-if="data"
+          :columns="getTargetColunms(data)" />
+      </template>
+    </BkTableColumn>
+    <BkTableColumn :label="t('切换模式')">
+      <template #default="{ data }: { data: RowData }">
+        {{ data.online_switch_type === 'user_confirm' ? t('需人工确认') : t('无需确认') }}
+      </template>
+    </BkTableColumn>
+  </BkTable>
 </template>
 
 <script setup lang="tsx">
   import _ from 'lodash';
   import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
 
-  import RedisModel from '@services/model/redis/redis';
-  import TicketModel, {type Redis} from '@services/model/ticket/ticket';
-  import { getRedisList } from '@services/source/redis';
+  import TicketModel, { type Redis } from '@services/model/ticket/ticket';
 
   import { TicketTypes } from '@common/const';
 
@@ -79,53 +78,29 @@
     ticketDetails: TicketModel<Redis.ScaleUpdown>
   }
 
-  type RowData = RedisModel & Props['ticketDetails']['details']['infos'][number]
+  type RowData = Props['ticketDetails']['details']['infos'][number];
 
   const props = defineProps<Props>();
 
   defineOptions({
     name: TicketTypes.REDIS_SCALE_UPDOWN,
-    inheritAttrs: false
-  })
+    inheritAttrs: false,
+  });
 
   const { t } = useI18n();
 
-  const tableData = ref<RowData[]>([]);
-
-  const { infos, specs } = props.ticketDetails.details;
-
-  const { loading } = useRequest(getRedisList, {
-    defaultParams: [{
-      cluster_ids: infos.map((item) => item.cluster_id).join(','),
-    }],
-    onSuccess(clustersResult) {
-      const clusterInfo = clustersResult.results.reduce<Record<number, RedisModel>>((results, item) => {
-        Object.assign(results, {
-          [item.id]: item,
-        });
-        return results;
-      }, {})
-      tableData.value = infos.map((infoItem) =>
-        Object.assign(
-          {},
-          clusterInfo[infoItem.cluster_id],
-          infoItem,
-        ));
-    }
-  })
-
   const getCurrentColunms = (data: RowData) => [
     {
       title: t('当前容量'),
-      render: () => <ClusterCapacityUsageRate clusterStats={data.cluster_stats} />
+      render: () => <ClusterCapacityUsageRate clusterStats={data.display_info.cluster_stats} />
     },
     {
       title: t('资源规格'),
       render: () => {
         const currentSpec = {
-          ...data.cluster_spec,
-          id: data.cluster_spec.spec_id,
-          name: data.cluster_spec.spec_name,
+          ...data.display_info.cluster_spec,
+          id: data.display_info.cluster_spec.spec_id,
+          name: data.display_info.cluster_spec.spec_name,
         }
         return (
           <RenderSpec
@@ -137,15 +112,15 @@
     },
     {
       title: t('机器组数'),
-      render: () => data.machine_pair_cnt
+      render: () => data.display_info.machine_pair_cnt
     },
     {
       title: t('机器数量'),
-      render: () => data.machine_pair_cnt * 2
+      render: () => data.display_info.machine_pair_cnt * 2
     },
     {
       title: t('分片数'),
-      render: () => data.cluster_shard_num
+      render: () => data.display_info.cluster_shard_num
     },
   ]
 
@@ -153,12 +128,12 @@
     {
       title: t('目标容量'),
       render: () => {
-        const { used = 0, total = 0 } = data.cluster_stats;
+        const { used = 0, total = 0 } = data.display_info.cluster_stats;
         const targetTotal = convertStorageUnits(data.future_capacity, 'GB', 'B')
-        const currentValue = data.cluster_capacity || convertStorageUnits(total, 'B', 'GB')
+        const currentValue = data.display_info.cluster_capacity || convertStorageUnits(total, 'B', 'GB')
 
         let stats = {}
-        if (!_.isEmpty(data.cluster_stats)) {
+        if (!_.isEmpty(data.display_info.cluster_stats)) {
           stats = {
             used,
             total: targetTotal,
@@ -180,7 +155,7 @@
     {
       title: t('资源规格'),
       render: () => {
-        const targetSpec = specs[data.resource_spec.backend_group.spec_id]
+        const targetSpec = props.ticketDetails.details.specs[data.resource_spec.backend_group.spec_id]
         return (
           <RenderSpec
             data={targetSpec}
@@ -197,7 +172,7 @@
           <>
             <span>{targetValue}</span>
             <ValueDiff
-              currentValue={data.machine_pair_cnt}
+              currentValue={data.display_info.machine_pair_cnt}
               show-rate={false}
               targetValue={targetValue} />
           </>
@@ -212,7 +187,7 @@
           <>
             <span>{targetValue}</span>
             <ValueDiff
-              currentValue={data.machine_pair_cnt * 2}
+              currentValue={data.display_info.machine_pair_cnt * 2}
               show-rate={false}
               targetValue={targetValue} />
           </>
@@ -225,7 +200,7 @@
         <>
           <span>{data.shard_num}</span>
           <ValueDiff
-            currentValue={data.cluster_shard_num}
+            currentValue={data.display_info.cluster_shard_num}
             show-rate={false}
             targetValue={data.shard_num} />
         </>
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterTypeUpdate.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterTypeUpdate.vue
deleted file mode 100644
index 6ede881287..0000000000
--- a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/redis/ClusterTypeUpdate.vue
+++ /dev/null
@@ -1,191 +0,0 @@
-<!--
- * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
- *
- * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
- *
- * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License athttps://opensource.org/licenses/MIT
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
- * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
- * the specific language governing permissions and limitations under the License.
--->
-
-<template>
-  <div
-    class="ticket-details-item"
-    style="align-items: flex-start">
-    <span class="ticket-details-item-label">{{ t('变更信息') }}：</span>
-    <span class="ticket-details-item-value">
-      <BkLoading :loading="loading">
-        <DbOriginalTable
-          :columns="columns"
-          :data="tableData" />
-      </BkLoading>
-    </span>
-  </div>
-  <div class="ticket-details-list">
-    <div class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('校验与修复类型') }}：</span>
-      <span class="ticket-details-item-value">
-        {{ repairAndVerifyTypesMap[ticketDetails.details.data_check_repair_setting.type] }}
-      </span>
-    </div>
-    <div
-      v-if="ticketDetails.details.data_check_repair_setting.type !== 'no_check_no_repair'"
-      class="ticket-details-item">
-      <span class="ticket-details-item-label">{{ t('校验与修复频率设置') }}：</span>
-      <span class="ticket-details-item-value">
-        {{ repairAndVerifyFrequencyMap[ticketDetails.details.data_check_repair_setting.execution_frequency] }}
-      </span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="tsx">
-  import { useI18n } from 'vue-i18n';
-  import { useRequest } from 'vue-request';
-
-  import RedisModel from '@services/model/redis/redis';
-  import type { RedisClusterTypeUpdateDetails } from '@services/model/ticket/details/redis';
-  import TicketModel from '@services/model/ticket/ticket';
-  import { getResourceSpecList } from '@services/source/dbresourceSpec';
-  import { getRedisListByBizId } from '@services/source/redis';
-
-  import { repairAndVerifyFrequencyList, repairAndVerifyTypeList,specClusterMachineMap } from '@views/db-manage/redis/common/const'
-
-  interface Props {
-    ticketDetails: TicketModel<RedisClusterTypeUpdateDetails>
-  }
-
-  interface RowData {
-    clusterName: string,
-    currentSepc: string,
-    srcClusterType: string,
-    targetClusterType: string,
-    deployPlan: string,
-    dbVersion: string,
-    switchMode: string,
-    capacity: number,
-    futureCapacity: number,
-  }
-
-  const props = defineProps<Props>();
-
-  const { t } = useI18n();
-
-  const tableData = ref<RowData[]>([]);
-
-  const { clusters, infos } = props.ticketDetails.details;
-
-  const columns = [
-    {
-      label: t('源集群'),
-      field: 'clusterName',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('架构版本'),
-      field: 'clusterTypeName',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('原集群类型'),
-      field: 'srcClusterType',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('目标集群类型'),
-      field: 'targetClusterType',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('当前集群容量/QPS'),
-      field: 'currentSepc',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('当前容量需求'),
-      field: 'capacity',
-      showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => <span>{data.capacity}G</span>,
-    },
-    {
-      label: t('未来容量需求'),
-      field: 'futureCapacity',
-      showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => <span>{data.futureCapacity}G</span>,
-    },
-    {
-      label: t('部署方案'),
-      field: 'deployPlan',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('版本'),
-      field: 'dbVersion',
-      showOverflowTooltip: true,
-    },
-    {
-      label: t('切换模式'),
-      field: 'switchMode',
-      showOverflowTooltip: true,
-      render: ({ data }: {data: RowData}) => <span>{data.switchMode === 'user_confirm' ? t('需人工确认') : t('无需确认')}</span>,
-    },
-  ];
-
-  const repairAndVerifyTypesMap = generateMap(repairAndVerifyTypeList);
-
-  const repairAndVerifyFrequencyMap = generateMap(repairAndVerifyFrequencyList);
-
-  const { loading } = useRequest(getRedisListByBizId, {
-    defaultParams: [{
-      bk_biz_id: props.ticketDetails.bk_biz_id,
-      offset: 0,
-      limit: -1,
-    }],
-    onSuccess: async (result) => {
-      if (result.results.length < 1) {
-        return;
-      }
-
-      const clusterMap = result.results.reduce((obj, item) => {
-        Object.assign(obj, { [item.id]: item });
-        return obj;
-      }, {} as Record<string, RedisModel>);
-      const sepcListResult = await getResourceSpecList({
-        spec_cluster_type: 'redis',
-        limit: -1,
-        offset: 0,
-      });
-      tableData.value = infos.map((item) => {
-        const currentCluster = clusterMap[item.src_cluster];
-        const specConfig = currentCluster.cluster_spec;
-        const targetSepcPlan = sepcListResult.results.filter(row => row.spec_id === item.resource_spec.backend_group.spec_id);
-        return ({
-          clusterName: currentCluster.master_domain,
-          srcClusterType: specClusterMachineMap[clusters[item.src_cluster].cluster_type],
-          clusterTypeName: clusters[item.src_cluster].cluster_type_name,
-          currentSepc: `${currentCluster.cluster_capacity}G_${specConfig.qps.max}/s（${item.current_shard_num} 分片）`,
-          deployPlan: targetSepcPlan.length > 0 ? targetSepcPlan[0].spec_name : '',
-          targetClusterType: specClusterMachineMap[item.target_cluster_type],
-          dbVersion: item.db_version,
-          switchMode: item.online_switch_type,
-          capacity: item.capacity,
-          futureCapacity: item.future_capacity,
-        });
-      });
-    },
-  });
-
-  // 生成映射表
-  function generateMap(arr: { label: string, value: string}[]) {
-    return arr.reduce((obj, item) => {
-      Object.assign(obj, { [item.value]: item.label });
-      return obj;
-    }, {} as Record<string, string>);
-  }
-</script>
-<style lang="less" scoped>
-  @import '@views/tickets/common/styles/ticketDetails.less';
-</style>