From b29f498748d92f28fea2d5d187fde4b518354d3c Mon Sep 17 00:00:00 2001
From: songlh <song.lhlh@gmail.com>
Date: Thu, 6 Jun 2024 11:08:58 +0800
Subject: [PATCH] feat: update topology view

---
 .../cmdb/components/searchForm/SearchForm.vue | 636 +++++++++---------
 cmdb-ui/src/modules/cmdb/lang/en.js           |   1 +
 cmdb-ui/src/modules/cmdb/lang/zh.js           |   1 +
 .../cmdb/views/topology_view/index.vue        | 415 +++++++++++-
 4 files changed, 703 insertions(+), 350 deletions(-)

diff --git a/cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue b/cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue
index c783920..bbb65c6 100644
--- a/cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue
+++ b/cmdb-ui/src/modules/cmdb/components/searchForm/SearchForm.vue
@@ -1,317 +1,319 @@
-<template>
-  <div>
-    <div id="search-form-bar" class="search-form-bar">
-      <div :style="{ display: 'inline-flex', alignItems: 'center' }">
-        <a-space>
-          <treeselect
-            v-if="type === 'resourceSearch'"
-            class="custom-treeselect custom-treeselect-bgcAndBorder"
-            :style="{
-              width: '200px',
-              marginRight: '10px',
-              '--custom-height': '32px',
-              '--custom-bg-color': '#fff',
-              '--custom-border': '1px solid #d9d9d9',
-              '--custom-multiple-lineHeight': '16px',
-            }"
-            v-model="currenCiType"
-            :multiple="true"
-            :clearable="true"
-            searchable
-            :options="ciTypeGroup"
-            :limit="1"
-            :limitText="(count) => `+ ${count}`"
-            value-consists-of="LEAF_PRIORITY"
-            :placeholder="$t('cmdb.ciType.ciType')"
-            @close="closeCiTypeGroup"
-            @open="openCiTypeGroup"
-            @input="inputCiTypeGroup"
-            :normalizer="
-              (node) => {
-                return {
-                  id: node.id || -1,
-                  label: node.alias || node.name || $t('other'),
-                  title: node.alias || node.name || $t('other'),
-                  children: node.ci_types,
-                }
-              }
-            "
-          >
-            <div
-              :title="node.label"
-              slot="option-label"
-              slot-scope="{ node }"
-              :style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
-            >
-              {{ node.label }}
-            </div>
-          </treeselect>
-          <a-input
-            v-model="fuzzySearch"
-            :style="{ display: 'inline-block', width: '200px' }"
-            :placeholder="$t('cmdb.components.pleaseSearch')"
-            @pressEnter="emitRefresh"
-          >
-            <a-icon
-              type="search"
-              slot="suffix"
-              :style="{ color: fuzzySearch ? '#2f54eb' : '#d9d9d9', cursor: 'pointer' }"
-              @click="emitRefresh"
-            />
-            <a-tooltip slot="prefix" placement="bottom" :overlayStyle="{ maxWidth: '550px', whiteSpace: 'pre-line' }">
-              <template slot="title">
-                {{ $t('cmdb.components.ciSearchTips') }}
-              </template>
-              <a><a-icon type="question-circle"/></a>
-            </a-tooltip>
-          </a-input>
-          <a-tooltip :title="$t('reset')">
-            <a-button @click="reset">{{ $t('reset') }}</a-button>
-          </a-tooltip>
-          <FilterComp
-            ref="filterComp"
-            :canSearchPreferenceAttrList="canSearchPreferenceAttrList"
-            @setExpFromFilter="setExpFromFilter"
-            :expression="expression"
-            placement="bottomLeft"
-          >
-            <div slot="popover_item" class="search-form-bar-filter">
-              <a-icon class="search-form-bar-filter-icon" type="filter" />
-              {{ $t('cmdb.components.conditionFilter') }}
-              <a-icon class="search-form-bar-filter-icon" type="down" :style="{ color: '#d9d9d9' }" />
-            </div>
-          </FilterComp>
-          <a-input
-            v-if="isShowExpression"
-            v-model="expression"
-            v-show="!selectedRowKeys.length"
-            @focus="
-              () => {
-                isFocusExpression = true
-              }
-            "
-            @blur="
-              () => {
-                isFocusExpression = false
-              }
-            "
-            :class="{ 'ci-searchform-expression': true, 'ci-searchform-expression-has-value': expression }"
-            :style="{ width }"
-            :placeholder="placeholder"
-            @keyup.enter="emitRefresh"
-          >
-            <a-icon slot="suffix" type="check-circle" @click="handleCopyExpression" />
-          </a-input>
-          <slot></slot>
-        </a-space>
-      </div>
-      <a-space>
-        <slot name="extraContent"></slot>
-        <a-tooltip :title="$t('cmdb.components.attributeDesc')" v-if="type === 'relationView'">
-          <a
-            @click="
-              () => {
-                $refs.metadataDrawer.open(typeId)
-              }
-            "
-          ><a-icon
-            v-if="type === 'relationView'"
-            type="question-circle"
-          /></a>
-        </a-tooltip>
-      </a-space>
-    </div>
-    <MetadataDrawer ref="metadataDrawer" />
-  </div>
-</template>
-
-<script>
-import _ from 'lodash'
-import Treeselect from '@riophae/vue-treeselect'
-import MetadataDrawer from '../../views/ci/modules/MetadataDrawer.vue'
-import FilterComp from '@/components/CMDBFilterComp'
-import { getCITypeGroups } from '../../api/ciTypeGroup'
-export default {
-  name: 'SearchForm',
-  components: { MetadataDrawer, FilterComp, Treeselect },
-  props: {
-    preferenceAttrList: {
-      type: Array,
-      required: true,
-    },
-    isShowExpression: {
-      type: Boolean,
-      default: true,
-    },
-    typeId: {
-      type: Number,
-      default: null,
-    },
-    type: {
-      type: String,
-      default: '',
-    },
-    selectedRowKeys: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      // Advanced Search Expand/Close
-      advanced: false,
-      queryParam: {},
-      isFocusExpression: false,
-      expression: '',
-      fuzzySearch: '',
-      currenCiType: [],
-      ciTypeGroup: [],
-      lastCiType: [],
-    }
-  },
-
-  computed: {
-    placeholder() {
-      return this.isFocusExpression ? this.$t('cmdb.components.ciSearchTips2') : this.$t('cmdb.ciType.expr')
-    },
-    width() {
-      return '200px'
-    },
-    canSearchPreferenceAttrList() {
-      return this.preferenceAttrList.filter((item) => item.value_type !== '6')
-    },
-  },
-  watch: {
-    '$route.path': function(newValue, oldValue) {
-      this.queryParam = {}
-      this.expression = ''
-      this.fuzzySearch = ''
-    },
-  },
-  inject: {
-    setPreferenceSearchCurrent: {
-      from: 'setPreferenceSearchCurrent',
-      default: null,
-    },
-  },
-  mounted() {
-    if (this.type === 'resourceSearch') {
-      this.getCITypeGroups()
-    }
-    if (this.typeId) {
-      this.currenCiType = [this.typeId]
-    }
-  },
-  methods: {
-    // toggleAdvanced() {
-    //   this.advanced = !this.advanced
-    // },
-    getCITypeGroups() {
-      getCITypeGroups({ need_other: true }).then((res) => {
-        this.ciTypeGroup = res
-          .filter((item) => item.ci_types && item.ci_types.length)
-          .map((item) => {
-            item.id = `parent_${item.id || -1}`
-            return { ..._.cloneDeep(item) }
-          })
-      })
-    },
-    reset() {
-      this.queryParam = {}
-      this.expression = ''
-      this.fuzzySearch = ''
-      this.currenCiType = []
-      this.emitRefresh()
-    },
-    setExpFromFilter(filterExp) {
-      const regSort = /(?<=sort=).+/g
-      const expSort = this.expression.match(regSort) ? this.expression.match(regSort)[0] : undefined
-      let expression = ''
-      if (filterExp) {
-        expression = `q=${filterExp}`
-      }
-      if (expSort) {
-        expression += `&sort=${expSort}`
-      }
-      this.expression = expression
-      this.emitRefresh()
-    },
-    handleSubmit() {
-      this.$refs.filterComp.handleSubmit()
-    },
-    openCiTypeGroup() {
-      this.lastCiType = _.cloneDeep(this.currenCiType)
-    },
-    closeCiTypeGroup(value) {
-      if (!_.isEqual(value, this.lastCiType)) {
-        this.$emit('updateAllAttributesList', value)
-      }
-    },
-    inputCiTypeGroup(value) {
-      if (!value || !value.length) {
-        this.$emit('updateAllAttributesList', value)
-      }
-    },
-    emitRefresh() {
-      if (this.setPreferenceSearchCurrent) {
-        this.setPreferenceSearchCurrent(null)
-      }
-      this.$nextTick(() => {
-        this.$emit('refresh', true)
-      })
-    },
-    handleCopyExpression() {
-      this.$emit('copyExpression')
-    },
-  },
-}
-</script>
-<style lang="less">
-@import '../../views/index.less';
-.ci-searchform-expression {
-  > input {
-    border-bottom: 2px solid #d9d9d9;
-    border-top: none;
-    border-left: none;
-    border-right: none;
-    &:hover,
-    &:focus {
-      border-bottom: 2px solid @primary-color;
-    }
-    &:focus {
-      box-shadow: 0 2px 2px -2px #1f78d133;
-    }
-  }
-  .ant-input-suffix {
-    color: #d9d9d9;
-    cursor: pointer;
-  }
-}
-.ci-searchform-expression-has-value .ant-input-suffix {
-  color: @func-color_3;
-}
-.cmdb-search-form {
-  .ant-form-item-label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-</style>
-
-<style lang="less" scoped>
-.search-form-bar {
-  margin-bottom: 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 32px;
-  .search-form-bar-filter {
-    .ops_display_wrapper(transparent);
-    .search-form-bar-filter-icon {
-      color: @primary-color;
-      font-size: 12px;
-    }
-  }
-}
-</style>
+<template>
+  <div>
+    <div id="search-form-bar" class="search-form-bar">
+      <div :style="{ display: 'inline-flex', alignItems: 'center' }">
+        <a-space>
+          <treeselect
+            v-if="type === 'resourceSearch'"
+            class="custom-treeselect custom-treeselect-bgcAndBorder"
+            :style="{
+              width: '200px',
+              marginRight: '10px',
+              '--custom-height': '32px',
+              '--custom-bg-color': '#fff',
+              '--custom-border': '1px solid #d9d9d9',
+              '--custom-multiple-lineHeight': '16px',
+            }"
+            v-model="currenCiType"
+            :multiple="true"
+            :clearable="true"
+            searchable
+            :options="ciTypeGroup"
+            :limit="1"
+            :limitText="(count) => `+ ${count}`"
+            value-consists-of="LEAF_PRIORITY"
+            :placeholder="$t('cmdb.ciType.ciType')"
+            @close="closeCiTypeGroup"
+            @open="openCiTypeGroup"
+            @input="inputCiTypeGroup"
+            :normalizer="
+              (node) => {
+                return {
+                  id: node.id || -1,
+                  label: node.alias || node.name || $t('other'),
+                  title: node.alias || node.name || $t('other'),
+                  children: node.ci_types,
+                }
+              }
+            "
+          >
+            <div
+              :title="node.label"
+              slot="option-label"
+              slot-scope="{ node }"
+              :style="{ width: '100%', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }"
+            >
+              {{ node.label }}
+            </div>
+          </treeselect>
+          <a-input
+            v-model="fuzzySearch"
+            :style="{ display: 'inline-block', width: '200px' }"
+            :placeholder="$t('cmdb.components.pleaseSearch')"
+            @pressEnter="emitRefresh"
+          >
+            <a-icon
+              type="search"
+              slot="suffix"
+              :style="{ color: fuzzySearch ? '#2f54eb' : '#d9d9d9', cursor: 'pointer' }"
+              @click="emitRefresh"
+            />
+            <a-tooltip slot="prefix" placement="bottom" :overlayStyle="{ maxWidth: '550px', whiteSpace: 'pre-line' }">
+              <template slot="title">
+                {{ $t('cmdb.components.ciSearchTips') }}
+              </template>
+              <a><a-icon type="question-circle"/></a>
+            </a-tooltip>
+          </a-input>
+          <a-tooltip :title="$t('reset')">
+            <a-button @click="reset">{{ $t('reset') }}</a-button>
+          </a-tooltip>
+          <FilterComp
+            ref="filterComp"
+            :canSearchPreferenceAttrList="canSearchPreferenceAttrList"
+            @setExpFromFilter="setExpFromFilter"
+            :expression="expression"
+            placement="bottomLeft"
+          >
+            <div slot="popover_item" class="search-form-bar-filter">
+              <a-icon class="search-form-bar-filter-icon" type="filter" />
+              {{ $t('cmdb.components.conditionFilter') }}
+              <a-icon class="search-form-bar-filter-icon" type="down" :style="{ color: '#d9d9d9' }" />
+            </div>
+          </FilterComp>
+          <a-input
+            v-if="isShowExpression"
+            v-model="expression"
+            v-show="!selectedRowKeys.length"
+            @focus="
+              () => {
+                isFocusExpression = true
+              }
+            "
+            @blur="
+              () => {
+                isFocusExpression = false
+              }
+            "
+            :class="{ 'ci-searchform-expression': true, 'ci-searchform-expression-has-value': expression }"
+            :style="{ width }"
+            :placeholder="placeholder"
+            @keyup.enter="emitRefresh"
+          >
+            <a-icon slot="suffix" type="check-circle" @click="handleCopyExpression" />
+          </a-input>
+          <slot></slot>
+        </a-space>
+      </div>
+      <a-space>
+        <slot name="extraContent"></slot>
+        <a-tooltip :title="$t('cmdb.components.attributeDesc')" v-if="type === 'relationView'">
+          <a
+            @click="
+              () => {
+                $refs.metadataDrawer.open(typeId)
+              }
+            "
+          ><a-icon
+            v-if="type === 'relationView'"
+            type="question-circle"
+          /></a>
+        </a-tooltip>
+      </a-space>
+    </div>
+    <MetadataDrawer ref="metadataDrawer" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import Treeselect from '@riophae/vue-treeselect'
+import MetadataDrawer from '../../views/ci/modules/MetadataDrawer.vue'
+import FilterComp from '@/components/CMDBFilterComp'
+import { getCITypeGroups } from '../../api/ciTypeGroup'
+export default {
+  name: 'SearchForm',
+  components: { MetadataDrawer, FilterComp, Treeselect },
+  props: {
+    preferenceAttrList: {
+      type: Array,
+      required: true,
+    },
+    isShowExpression: {
+      type: Boolean,
+      default: true,
+    },
+    typeId: {
+      type: Number,
+      default: null,
+    },
+    type: {
+      type: String,
+      default: '',
+    },
+    selectedRowKeys: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      // Advanced Search Expand/Close
+      advanced: false,
+      queryParam: {},
+      isFocusExpression: false,
+      expression: '',
+      fuzzySearch: '',
+      currenCiType: [],
+      ciTypeGroup: [],
+      lastCiType: [],
+    }
+  },
+
+  computed: {
+    placeholder() {
+      return this.isFocusExpression ? this.$t('cmdb.components.ciSearchTips2') : this.$t('cmdb.ciType.expr')
+    },
+    width() {
+      return '200px'
+    },
+    canSearchPreferenceAttrList() {
+      return this.preferenceAttrList.filter((item) => item.value_type !== '6')
+    },
+  },
+  watch: {
+    '$route.path': function(newValue, oldValue) {
+      this.queryParam = {}
+      this.expression = ''
+      this.fuzzySearch = ''
+    },
+  },
+  inject: {
+    setPreferenceSearchCurrent: {
+      from: 'setPreferenceSearchCurrent',
+      default: null,
+    },
+  },
+  mounted() {
+    if (this.type === 'resourceSearch') {
+      this.getCITypeGroups()
+    }
+    if (this.typeId) {
+      this.currenCiType = [this.typeId]
+    }
+  },
+  methods: {
+    // toggleAdvanced() {
+    //   this.advanced = !this.advanced
+    // },
+    getCITypeGroups() {
+      getCITypeGroups({ need_other: true }).then((res) => {
+        this.ciTypeGroup = res
+          .filter((item) => item.ci_types && item.ci_types.length)
+          .map((item) => {
+            item.id = `parent_${item.id || -1}`
+            return { ..._.cloneDeep(item) }
+          })
+      })
+    },
+    reset() {
+      this.queryParam = {}
+      this.expression = ''
+      this.fuzzySearch = ''
+      if (this.type !== 'resourceView') {
+        this.currenCiType = []
+      }
+      this.emitRefresh()
+    },
+    setExpFromFilter(filterExp) {
+      const regSort = /(?<=sort=).+/g
+      const expSort = this.expression.match(regSort) ? this.expression.match(regSort)[0] : undefined
+      let expression = ''
+      if (filterExp) {
+        expression = `q=${filterExp}`
+      }
+      if (expSort) {
+        expression += `&sort=${expSort}`
+      }
+      this.expression = expression
+      this.emitRefresh()
+    },
+    handleSubmit() {
+      this.$refs.filterComp.handleSubmit()
+    },
+    openCiTypeGroup() {
+      this.lastCiType = _.cloneDeep(this.currenCiType)
+    },
+    closeCiTypeGroup(value) {
+      if (!_.isEqual(value, this.lastCiType)) {
+        this.$emit('updateAllAttributesList', value)
+      }
+    },
+    inputCiTypeGroup(value) {
+      if (!value || !value.length) {
+        this.$emit('updateAllAttributesList', value)
+      }
+    },
+    emitRefresh() {
+      if (this.setPreferenceSearchCurrent) {
+        this.setPreferenceSearchCurrent(null)
+      }
+      this.$nextTick(() => {
+        this.$emit('refresh', true)
+      })
+    },
+    handleCopyExpression() {
+      this.$emit('copyExpression')
+    },
+  },
+}
+</script>
+<style lang="less">
+@import '../../views/index.less';
+.ci-searchform-expression {
+  > input {
+    border-bottom: 2px solid #d9d9d9;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    &:hover,
+    &:focus {
+      border-bottom: 2px solid @primary-color;
+    }
+    &:focus {
+      box-shadow: 0 2px 2px -2px #1f78d133;
+    }
+  }
+  .ant-input-suffix {
+    color: #d9d9d9;
+    cursor: pointer;
+  }
+}
+.ci-searchform-expression-has-value .ant-input-suffix {
+  color: @func-color_3;
+}
+.cmdb-search-form {
+  .ant-form-item-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>
+
+<style lang="less" scoped>
+.search-form-bar {
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 32px;
+  .search-form-bar-filter {
+    .ops_display_wrapper(transparent);
+    .search-form-bar-filter-icon {
+      color: @primary-color;
+      font-size: 12px;
+    }
+  }
+}
+</style>
diff --git a/cmdb-ui/src/modules/cmdb/lang/en.js b/cmdb-ui/src/modules/cmdb/lang/en.js
index 22e9d5d..539b0a5 100644
--- a/cmdb-ui/src/modules/cmdb/lang/en.js
+++ b/cmdb-ui/src/modules/cmdb/lang/en.js
@@ -589,6 +589,7 @@ if __name__ == "__main__":
         confirmDeleteView: 'Are you sure you want to delete this view ?',
         noInstancePerm: 'You do not have read permissions for this instance',
         noPreferenceAttributes: 'This instance has no subscription attributes or no default displayed attributes',
+        topoViewSearchPlaceholder: 'Please enter the node name.'
     },
 }
 export default cmdb_en
diff --git a/cmdb-ui/src/modules/cmdb/lang/zh.js b/cmdb-ui/src/modules/cmdb/lang/zh.js
index 35b6a1b..3daf592 100644
--- a/cmdb-ui/src/modules/cmdb/lang/zh.js
+++ b/cmdb-ui/src/modules/cmdb/lang/zh.js
@@ -589,6 +589,7 @@ if __name__ == "__main__":
         confirmDeleteView: '您确定要删除该视图吗?',
         noInstancePerm: '您没有该实例的查看权限',
         noPreferenceAttributes: '该实例没有订阅属性或者没有默认展示的属性',
+        topoViewSearchPlaceholder: '请输入节点名字'
     },
 }
 export default cmdb_zh
diff --git a/cmdb-ui/src/modules/cmdb/views/topology_view/index.vue b/cmdb-ui/src/modules/cmdb/views/topology_view/index.vue
index dc8377f..726315c 100644
--- a/cmdb-ui/src/modules/cmdb/views/topology_view/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/topology_view/index.vue
@@ -140,12 +140,33 @@
             <div :style="{ height: `${windowHeight - 80}px` }" ref="rightTopoView">
               <RelationGraph ref="showTopoView" :options="graphOptions2" :on-node-click="showNodeTips">
                 <template #node="{node}">
-                  <div :style="{ lineHeight: '20px' }">
-                    <ops-icon type="caise-wuliji" />
-                    <span :style="{ marginLeft: '5px', textOverflow: 'ellipsis' }">{{ node.text }}aaa</span>
+                  <div
+                    :style="{ borderColor: node.data.btnType === 'more' ? '#A4B5E1' : nodeStyle[Math.abs(node.lot.level)] ? nodeStyle[Math.abs(node.lot.level)].backgroundColor : '#A4B5E1' }"
+                    class="relation-graph-node"
+                  >
+                    <template v-if="node.data.icon">
+                      <img
+                        v-if="node.data.icon.split('$$')[2]"
+                        :src="`/api/common-setting/v1/file/${node.data.icon.split('$$')[3]}`"
+                        class="relation-graph-node-image"
+                      />
+                      <ops-icon
+                        v-else
+                        :style="{ color: node.data.icon.split('$$')[1] }"
+                        :type="node.data.icon ? node.data.icon.split('$$')[0] : ''"
+                        class="relation-graph-node-icon"
+                      />
+                    </template>
+                    <span class="relation-graph-node-text">{{ node.text }}</span>
                   </div>
                 </template>
                 <template #graph-plug>
+                  <a-input-search
+                    class="relation-graph-search"
+                    v-model="topoViewSearchValue"
+                    :placeholder="$t('cmdb.topo.topoViewSearchPlaceholder')"
+                    @search="handleSearchTopoView"
+                  />
                   <div v-if="(isShowNodeTipsPanel && currentNodeValues && currentNodeAttributes.length) || errorMessageShow" :style="nodeTipsPosition" class="node-tips">
                     <a-descriptions
                       v-if="currentNodeValues"
@@ -236,12 +257,12 @@
             </SeeksRelationGraph>
           </div>
         </a-form-item>
-        <a-form-item :style="{ display: 'none' }" :label="$t('cmdb.topo.aggregationCount')" prop="aggregation_count" :help="$t('cmdb.topo.aggreationCountTip')">
+        <a-form-item :label="$t('cmdb.topo.aggregationCount')" prop="aggregation_count" :help="$t('cmdb.topo.aggreationCountTip')">
           <a-input-number
             :style="{ width: '100%' }"
+            :min="0"
             v-decorator="['aggregation_count']"
           >
-            <a @click="handleOpenCmdb" slot="suffix"><a-icon type="menu"/></a>
           </a-input-number>
         </a-form-item>
         <div :class="{ 'chart-left-preview': true, 'chart-left-preview-empty': !isShowPreview }">
@@ -253,9 +274,27 @@
           >
           <template v-if="isShowPreview">
             <RelationGraph ref="previewTopoView" :options="graphOptionsPrivew">
-              <div slot="node" slot-scope="{ node }" :style="{ lineHeight: '20px' }">
-                <span :style="{ marginLeft: '5px' }">{{ node.text }}</span>
-              </div>
+              <template #node="{node}">
+                <div
+                  :style="{ borderColor: nodeStyle[node.lot.level] ? nodeStyle[node.lot.level].backgroundColor : '#7F97FA' }"
+                  class="relation-graph-node"
+                >
+                  <template v-if="node.data.icon">
+                    <img
+                      v-if="node.data.icon.split('$$')[2]"
+                      :src="`/api/common-setting/v1/file/${node.data.icon.split('$$')[3]}`"
+                      class="relation-graph-node-image"
+                    />
+                    <ops-icon
+                      v-else
+                      :style="{ color: node.data.icon.split('$$')[1] }"
+                      :type="node.data.icon ? node.data.icon.split('$$')[0] : ''"
+                      class="relation-graph-node-icon"
+                    />
+                  </template>
+                  <span class="relation-graph-node-text">{{ node.text }}</span>
+                </div>
+              </template>
             </RelationGraph>
           </template>
         </div>
@@ -290,6 +329,7 @@ import { getSubscribeAttributes } from '@/modules/cmdb/api/preference'
 import { searchCI } from '@/modules/cmdb/api/ci'
 import { getTopoGroups, postTopoGroup, putTopoGroupByGId, putTopoGroupsOrder, deleteTopoGroup, getTopoView, addTopoView, updateTopoView, deleteTopoView, getRelationsByTypeId, previewTopoView, showTopoView } from '@/modules/cmdb/api/topology'
 import CMDBExprDrawer from '@/components/CMDBExprDrawer'
+import { v4 as uuidv4 } from 'uuid'
 
 const currentTopoKey = 'ops_cmdb_topo_currentId'
 export default {
@@ -326,6 +366,7 @@ export default {
     const graphOptions2 = {
       // ...defaultOptions,
       backgrounImageNoRepeat: true,
+      ovUseNodeSlot: true,
       placeOtherGroup: true,
       moveToCenterWhenRefresh: true,
       zoomToFitWhenRefresh: true,
@@ -339,10 +380,11 @@ export default {
       max_per_width: 200,
       min_per_height: 40,
       max_per_height: undefined,
-      defaultLineColor: '#CACDD9',
-      defaultNodeColor: '#29AAE1',
-      defaultNodeFontColor: '#ffffff',
-      defaultNodeBorderColor: '#b1c9ff',
+      backgroundColor: '#FFFFFF',
+      // defaultLineColor: '#CACDD9',
+      // defaultNodeColor: '#29AAE1',
+      // defaultNodeFontColor: '#ffffff',
+      // defaultNodeBorderColor: '#b1c9ff',
       defaultExpandHolderPosition: 'right',
       defaultJunctionPoint: 'lr',
       layouts: [
@@ -350,7 +392,7 @@ export default {
           layoutName: 'tree',
           from: 'left',
           layoutClassName: 'seeks-layout-center',
-          defaultExpandHolderPosition: 'hide',
+          defaultExpandHolderPosition: 'right',
           defaultJunctionPoint: 'border',
         },
       ],
@@ -411,6 +453,29 @@ export default {
 
       errorMessageShow: false,
       errorMessage: '',
+      nodeStyle: {
+        '0': {
+          backgroundColor: '#2F54EB'
+        },
+        '1': {
+          backgroundColor: '#29AAE1'
+        },
+        '2': {
+          backgroundColor: '#7F97FA'
+        },
+        '3': {
+          backgroundColor: '##75C5CA'
+        },
+        '4': {
+          backgroundColor: '#A699F6'
+        },
+        '5': {
+          backgroundColor: '#A4B5E1'
+        }
+      }, // 拓扑图节点分级别样式
+      topoViewJsonData: {}, // 拓扑图 JSON 数据
+      topoViewOption: {}, // 拓扑图配置数据 子节点分页
+      topoViewSearchValue: '', // 拓扑图搜索
     }
   },
   provide() {
@@ -485,6 +550,30 @@ export default {
         : {}
     },
   },
+  watch: {
+    '$i18n.locale': {
+      immediate: true,
+      handler(newVal) {
+        this.changeTopoViewToolbarLang(newVal)
+      },
+    },
+    isShowPreview: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.changeTopoViewToolbarLang(this.$i18n.locale)
+        }
+      },
+    },
+    drawerVisible: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.changeTopoViewToolbarLang(this.$i18n.locale)
+        }
+      },
+    }
+  },
   methods: {
     closeNodeTips(e) {
       e.preventDefault()
@@ -578,7 +667,7 @@ export default {
         payload.view_ids = g.views.map(i => i.id)
       }
       if (groupId) {
-        putTopoGroupByGId(groupId, { view_ids: g.views.map((i) => i.id) })
+        putTopoGroupByGId(groupId, { view_ids: payload.view_ids })
         .then(() => {
           this.$message.success(that.$t('saveSuccess'))
         })
@@ -729,12 +818,21 @@ export default {
                 disableDefaultClickEffect: true,
               })
             })
+            const type2meta = res?.type2meta
             res.nodes.forEach(item => {
+              const icon = type2meta?.[item?.type_id] || ''
               nodes.push({
                 id: `${item.id}`,
                 text: item.name,
                 nodeShape: 1,
                 borderWidth: -1,
+                color: 'transparent',
+                styleClass: {
+                  padding: '0px'
+                },
+                data: {
+                  icon
+                },
                 disableDefaultClickEffect: true,
               })
             })
@@ -752,11 +850,15 @@ export default {
         }
       })
     },
-    showTopoView(viewId) {
+    async showTopoView(viewId) {
       if (viewId === 'null' || !viewId) {
         return
       }
-      showTopoView(viewId).then(res => {
+      const topoViewRes = await getTopoView(viewId)
+      if (topoViewRes?.option) {
+        this.topoViewOption = topoViewRes.option
+      }
+      showTopoView(viewId).then(async res => {
         const nodes = []
         const links = []
         this.currentNodes = res.nodes
@@ -768,11 +870,21 @@ export default {
             disableDefaultClickEffect: false,
           })
         })
+        const type2meta = res?.type2meta
         res.nodes.forEach(item => {
+          const icon = type2meta?.[item?.type_id] || ''
           nodes.push({
             id: `${item.id}`,
             text: item.name,
-            data: {},
+            color: 'transparent',
+            styleClass: {
+              padding: '0px'
+            },
+            data: {
+              icon
+            },
+            isHide: false,
+            opacity: 1,
           })
         })
         const _graphJsonData = {
@@ -783,11 +895,132 @@ export default {
           this.$message.error(this.$t('cmdb.topo.noData'))
           return
         }
-        // this.$nextTick(() => {
-        this.$refs.showTopoView.setJsonData(_graphJsonData)
-        // })
+        this.$refs.showTopoView.setJsonData(_.cloneDeep(_graphJsonData), async () => {
+          this.topoViewSearchValue = ''
+
+          // map 结构存储 节点
+          const nodeMap = _graphJsonData.nodes.reduce((map, node) => {
+            map.set(node.id, node)
+            return map
+          }, new Map())
+          _graphJsonData.nodes = nodeMap
+
+          if (this?.topoViewOption?.aggregation_count) {
+            const instance = this.$refs.showTopoView.getInstance()
+            const nodes = instance.getNodes()
+            const rootNodes = nodes.filter((node) => node.lot.level === 0)
+            rootNodes.forEach((node) => {
+              this.initMoreNodesData(node, _graphJsonData)
+            })
+
+            this.$refs.showTopoView.setJsonData(_.cloneDeep({
+              nodes: _graphJsonData.nodes.values(),
+              links: _graphJsonData.links
+            }))
+          }
+          this.topoViewJsonData = _graphJsonData
+          this.changeTopoViewToolbarLang(this.$i18n.locale)
+        })
       })
     },
+
+    /**
+     * 初始化子节点分页数据
+     */
+     initMoreNodesData(node, jsonData) {
+      const childs = node.lot.childs
+      // 没有子节点 终止遍历
+      if (!childs?.length) {
+        return
+      }
+
+      // 子节点分页数量
+      const aggregation_count = this?.topoViewOption?.aggregation_count || 1
+      // 展示节点数量
+      let showNodeCount = 0
+
+      childs.forEach((childNode, index) => {
+        if (childNode?.data?.btnType !== 'more') {
+          if (showNodeCount >= aggregation_count) {
+            const originNode = jsonData?.nodes?.get(childNode.id)
+            if (originNode) {
+              originNode.isHide = true
+            }
+          } else if (!childNode.isHide) {
+            showNodeCount++
+          }
+          this.initMoreNodesData(childNode, jsonData)
+        }
+      })
+
+      if (childs.length - showNodeCount > 0) {
+        const id = uuidv4()
+        jsonData.nodes.set(id, {
+          id,
+          text: `展示更多(${childs.length - showNodeCount})`,
+          data: {
+            btnType: 'more'
+          },
+          color: 'transparent',
+          styleClass: {
+            padding: '0px'
+          },
+        })
+
+        jsonData.links.push({
+          from: node.id,
+          to: id,
+        })
+      }
+    },
+
+    async clickMoreBtn(node) {
+      const childs = node?.lot?.parent?.lot?.childs
+      if (childs?.length) {
+        const topoViewJsonData = this.topoViewJsonData
+        let moreBtnNode = null
+        let showNodeCount = 0
+        let toggleNodeCount = 0
+        const aggregation_count = this?.topoViewOption?.aggregation_count || 1
+
+        childs.forEach((child) => {
+          if (!child.isHide) {
+            showNodeCount++
+          }
+
+          if (toggleNodeCount < aggregation_count && child.isHide) {
+            const childNode = topoViewJsonData?.nodes?.get(child.id)
+            if (childNode) {
+              childNode.isHide = false
+              toggleNodeCount++
+              showNodeCount++
+            }
+          }
+
+          if (child.data.btnType === 'more') {
+            moreBtnNode = topoViewJsonData?.nodes?.get(child.id)
+          }
+        })
+        if (moreBtnNode) {
+          if (showNodeCount === childs.length) {
+            moreBtnNode.isHide = true
+          } else {
+            moreBtnNode.text = `展示更多(${childs.length - showNodeCount})`
+          }
+        }
+
+        const instance = this.$refs.showTopoView.getInstance()
+        instance.setJsonData(
+          {
+            links: topoViewJsonData.links,
+            nodes: topoViewJsonData.nodes.values()
+          },
+          false
+        )
+        this.topoViewJsonData = topoViewJsonData
+      }
+    },
+
     handleOpenCmdb() {
       this.$refs.cmdbDrawer.open()
     },
@@ -921,9 +1154,16 @@ export default {
       }
     },
     async showNodeTips(nodeObject, $event) {
-      console.log('node click')
+      console.log('node click', nodeObject)
       $event.preventDefault()
       $event.stopPropagation()
+
+      const btnType = nodeObject?.data?.btnType
+      if (btnType === 'more') {
+        this.clickMoreBtn(nodeObject)
+        return
+      }
+
       const _base_position = this.$refs.showTopoView.getInstance().options.fullscreen ? { x: 0, y: 0 } : this.$refs.rightTopoView.getBoundingClientRect()
       if (this.currentNode !== nodeObject) {
         this.currentNodeValues = null
@@ -934,25 +1174,16 @@ export default {
           const [ attributes ] = await Promise.all([getSubscribeAttributes(rawNode.type_id)])
           this.currentNodeAttributes = attributes?.attributes || []
           if (!this.currentNodeAttributes.length) {
-            this.errorMessage = this.$t('cmdb.topo.noPreferenceAttributes')
-            this.errorMessageShow = true
-            this.currentNodeValues = null
-            this.isShowNodeTipsPanel = false
+            this.handleNullNodeTips(this.$t('cmdb.topo.noPreferenceAttributes'))
           }
           await searchCI({ q: `_id:${rawNode.id}` }, false).then(res => {
             if (!res.result.length) {
-              this.errorMessage = this.$t('cmdb.topo.noInstancePerm')
-              this.errorMessageShow = true
-              this.currentNodeValues = null
-              this.isShowNodeTipsPanel = false
+              this.handleNullNodeTips(this.$t('cmdb.topo.noInstancePerm'))
             } else {
               this.currentNodeValues = res.result[0]
             }
           }).catch(error => {
-            this.errorMessage = ((error.response || {}).data || {}).message
-            this.errorMessageShow = true
-            this.currentNodeValues = null
-            this.isShowNodeTipsPanel = false
+            this.handleNullNodeTips(((error.response || {}).data || {}).message)
           })
         }
       }
@@ -971,9 +1202,71 @@ export default {
       this.isShowNodeTipsPanel = true
       console.log(this.nodeTipsPosition)
     },
+
+    handleNullNodeTips(errorMessage) {
+      this.errorMessage = errorMessage
+      this.errorMessageShow = true
+      this.currentNodeValues = null
+      this.isShowNodeTipsPanel = false
+      this.currentNode = {}
+    },
+
     hideNodeTips(nodeObject, $event) {
       this.isShowNodeTipsPanel = false
     },
+
+    handleSearchTopoView(v) {
+      const topoViewJsonData = this.topoViewJsonData
+      topoViewJsonData.nodes.keys().forEach((key) => {
+        const node = topoViewJsonData?.nodes?.get(key)
+        if (node?.data?.btnType !== 'more') {
+          node.opacity = node?.text?.indexOf(v) !== -1 ? 1 : 0.1
+        }
+      })
+      const instance = this.$refs.showTopoView.getInstance()
+      instance.setJsonData(
+        {
+          links: topoViewJsonData.links,
+          nodes: topoViewJsonData.nodes.values()
+        },
+        false
+      )
+      this.topoViewJsonData = topoViewJsonData
+    },
+
+    changeTopoViewToolbarLang(lang) {
+      setTimeout(() => {
+        const toolbarElements = document.getElementsByClassName('rel-toolbar')
+        const zhlangMap = {
+          '全屏/退出全屏': 'Full Screen/Exit Full Screen',
+          '放大': 'zoom in',
+          '缩小': 'zoom out',
+          '刷新': 'refresh ',
+          '下载图片': 'download image'
+        }
+        const enlangMap = {
+          'Full Screen/Exit Full Screen': '全屏/退出全屏',
+          'zoom in': '放大',
+          'zoom out': '缩小',
+          'refresh': '刷新 ',
+          'download image': '下载图片'
+        }
+
+        toolbarElements.forEach((toolbarElement) => {
+          if (toolbarElement?.children?.length) {
+            toolbarElement.children.forEach((node) => {
+              const oldTitle = node?.getAttribute('title')
+              if (oldTitle) {
+                const newTitle = lang === 'en' ? zhlangMap[oldTitle] : enlangMap[oldTitle]
+                if (newTitle) {
+                  node.setAttribute('title', newTitle)
+                }
+              }
+            })
+          }
+        })
+      }, 300)
+    },
   },
 }
 </script>
@@ -1098,6 +1391,14 @@ export default {
       top: 40%;
       transform: translate(-50%, -50%);
     }
+
+    .relation-graph-search {
+      position: absolute;
+      z-index: 10;
+      top: 20px;
+      left: 20px;
+      width: 300px;
+    }
   }
   .topo-left,
   .topo-right {
@@ -1133,6 +1434,54 @@ export default {
     border-radius: 8px;
   }
 }
+
+.relation-graph-node {
+  padding: 6px 3px;
+  border-radius: 2px;
+  border-width: 2px;
+  border-style: solid;
+  background-color: transparent;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &-text {
+    color: #000000;
+    font-size: 12px;
+    font-weight: 400;
+    margin-left: 6px;
+    word-break: break-all;
+  }
+
+  &-icon {
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.65);
+  }
+
+  &-image {
+    max-height: 20px;
+    max-width: 20px;
+  }
+}
+
+/deep/ .relation-graph {
+  background-color: #FFFFFF;
+
+  .rel-node {
+    padding: 0px;
+    height: auto !important;
+  }
+  .rel-node-checked {
+    box-shadow: none;
+  }
+  .c-expanded {
+    background-color: rgb(64, 158, 255) !important;
+  }
+  .c-collapsed {
+    background-color: rgb(64, 158, 255) !important;
+  }
+}
 </style>
 
 <style lang="less">