关系图谱

src/views/manage/theme/relation-detail.vue

@@ -57,7 +57,7 @@
         <CusFormColumn
           :span="12"
           :required="$util.isValue(state.form.relateIndexId)"
-          label="权重"
+          label="节点权重"
           v-model:param="state.form.weight"
           link="select"
           :options="DictionaryStore.nodeSizeList"
@@ -69,6 +69,18 @@
           label="关系描述"
           v-model:param="state.form.relationDescription"
         />
+        <CusFormColumn
+          :span="12"
+          label="节点图标"
+          v-model:param="state.form.indexUrl"
+          link="upload"
+          layout="card"
+          type="img"
+          :limit="1"
+          limitNoUpload
+          :delRule="(file) => true"
+        />
+        <el-col :span="12"/>
         <el-col :span="12">
           <div class="__cus-title_1">索引条件</div>
           <CusTable
@@ -176,7 +188,9 @@ const props = defineProps({
   transfer: {}
  })
 const state: any = reactive({
-  form: {},
+  form: {
+    indexUrl: []
+  },
   loading: false,
   conditionTable: {
     selectValue: '',
@@ -213,6 +227,7 @@ const onSubmit = () => {
     } as any).then(() => {
       state.loading = true
       const params = {...state.form}
+      params.indexUrl = params.indexUrl.length > 0 ? params.indexUrl[0].url : ''
       params.indexCondition = state.conditionTable.data.length > 0 ? JSON.stringify(state.conditionTable.data) : ''
       params.indexOrder = state.sortTable.data.length > 0 ? JSON.stringify(state.sortTable.data) : ''
       if (props.transfer.mode === 'add') {
@@ -249,6 +264,7 @@ const initDetail = () => {
   state.loading = true
   sysThemeIndexFindById(props.transfer.id).then(res => {
     state.form = res.data
+    state.form.indexUrl = state.form.indexUrl ? [{url: state.form.indexUrl, name: state.form.indexUrl}] : []
     state.conditionTable.data = state.form.indexCondition ? JSON.parse(state.form.indexCondition) : []
     state.sortTable.data = state.form.indexOrder ? JSON.parse(state.form.indexOrder) : []
     initText(state.form.indexId)
@@ -283,7 +299,8 @@ watch(() => props.show, (n) => {
     initDictionary()
     if (props.transfer.mode === 'add') {
       state.form = {
-        isMain: '0'
+        isMain: '0',
+        indexUrl: []
       }
       initText(props.transfer.indexId)
     } else if (props.transfer.mode === 'edit') {

src/views/web/archive/index.vue

@@ -7,7 +7,7 @@
           <SvgIcon class="flag" name="flag_1" color="var(--cus-main-color)"/>
           <span class="main">{{state.mainObj.data[themeConfigCpt.main.indexStyle.mainParam]}}</span>
           <template v-for="k in themeConfigCpt.main.indexStyle.tagParams">
-            <span class="tag">{{ state.mainObj.data[k] }}</span>
+            <span class="tag" v-if="state.mainObj.data[k]">{{ state.mainObj.data[k] }}</span>
           </template>
         </div>
         <div class="archive-basic-sub" v-if="themeConfigCpt.main.indexStyle.subParams?.length > 0">
@@ -212,6 +212,7 @@ const themeConfigCpt = computed(() => {
       }
       res.chart.nodes.unshift({
         id: String(v.id),
+        iconSrc: v.url,
         weight: v.weight,
         num: 0,
         name: v.indexNameShort,
@@ -222,6 +223,7 @@ const themeConfigCpt = computed(() => {
     } else if (v.relateIndexId) {
       res.chart.nodes.push({
         id: String(v.id),
+        iconSrc: v.url,
         weight: v.weight,
         num: 0,
         name: v.indexNameShort,

src/views/web/archive/relation-chart.vue

@@ -22,8 +22,7 @@ const setNodes = (data) => {
     v.style = {
       badge: true,
       badges:[{text: String(v.num), placement: 'top-right', offsetX: -10, offsetY: 10}],
-      // icon: false,
-      iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
+      iconSrc: v.iconSrc,
     }
   })
 }
@@ -40,12 +39,11 @@ const initChart = () => {
     setNodes(data)
     setEdges(data)
     const mainColor = getComputedStyle(document.documentElement).getPropertyValue('--cus-main-color')
-    const mainColorHex2 = getComputedStyle(document.documentElement).getPropertyValue('--cus-main-color-hex-2')
     const graph = new Graph({
       container: 'container',
       data,
-      // autoResize: true,
-      autoFit: 'view',
+      autoResize: true,
+      autoFit: data.nodes.length < 10 ? 'center' : 'view',
       behaviors: ['drag-canvas', 'drag-element', 'zoom-canvas', {
         type: 'click-select',
         degree: 1,
@@ -127,7 +125,9 @@ const initChart = () => {
     })
     state.resizeObserver = new ResizeObserver((entries) => {
       for (const entry of entries) {
-        graph && graph?.resize()
+        setTimeout(() => {
+          graph && graph.resize() && graph.render()
+        }, 100)
       }
     })
     state.resizeObserver.observe(ref_main.value);