优化关系网样式
Showing
1 changed file
with
11 additions
and
6 deletions
| ... | @@ -4,7 +4,7 @@ | ... | @@ -4,7 +4,7 @@ |
| 4 | <div class="title">{{ detailInfoLabel }}</div> | 4 | <div class="title">{{ detailInfoLabel }}</div> |
| 5 | <div class="row" v-for="item in Object.keys(detailInfo)"> | 5 | <div class="row" v-for="item in Object.keys(detailInfo)"> |
| 6 | <span>{{ item + ':' }}</span> | 6 | <span>{{ item + ':' }}</span> |
| 7 | <span>{{ detailInfo[item] }}</span> | 7 | <span>{{ detailInfo[item] == null ? '-' : detailInfo[item] }}</span> |
| 8 | </div> | 8 | </div> |
| 9 | </div> | 9 | </div> |
| 10 | </div> | 10 | </div> |
| ... | @@ -37,6 +37,10 @@ const emits = defineEmits([ | ... | @@ -37,6 +37,10 @@ const emits = defineEmits([ |
| 37 | 37 | ||
| 38 | const { proxy } = getCurrentInstance() as any; | 38 | const { proxy } = getCurrentInstance() as any; |
| 39 | 39 | ||
| 40 | const maxChineseCount = ref(14); | ||
| 41 | |||
| 42 | const maxEnglishCount = ref(26); | ||
| 43 | |||
| 40 | const detailLoading = ref(false); | 44 | const detailLoading = ref(false); |
| 41 | 45 | ||
| 42 | const detailInfo: any = ref({}); | 46 | const detailInfo: any = ref({}); |
| ... | @@ -116,9 +120,9 @@ const detectLanguage = (text) => { | ... | @@ -116,9 +120,9 @@ const detectLanguage = (text) => { |
| 116 | 120 | ||
| 117 | const handleLabelLength = (label: string) => { | 121 | const handleLabelLength = (label: string) => { |
| 118 | if (detectLanguage(label) == 'English') { | 122 | if (detectLanguage(label) == 'English') { |
| 119 | return label?.length > 30 ? label.slice(0, 30) + '...' : label; | 123 | return label?.length > maxEnglishCount.value ? label.slice(0, maxEnglishCount.value) + '...' : label; |
| 120 | } | 124 | } |
| 121 | return label?.length > 16 ? label.slice(0, 16) + '...' : label; | 125 | return label?.length > maxChineseCount.value ? label.slice(0, maxChineseCount.value) + '...' : label; |
| 122 | }; | 126 | }; |
| 123 | 127 | ||
| 124 | insertCss(` | 128 | insertCss(` |
| ... | @@ -161,9 +165,9 @@ const initGraph = () => { | ... | @@ -161,9 +165,9 @@ const initGraph = () => { |
| 161 | const name = item._cfg.model?.label; | 165 | const name = item._cfg.model?.label; |
| 162 | if (currentAnchor == 'text-shape') { | 166 | if (currentAnchor == 'text-shape') { |
| 163 | if (detectLanguage(name) == 'English') { | 167 | if (detectLanguage(name) == 'English') { |
| 164 | return name?.length > 30; | 168 | return name?.length > maxEnglishCount.value; |
| 165 | } | 169 | } |
| 166 | return name?.length > 16; | 170 | return name?.length > maxChineseCount.value; |
| 167 | } | 171 | } |
| 168 | return false; | 172 | return false; |
| 169 | }, | 173 | }, |
| ... | @@ -300,8 +304,9 @@ const initGraph = () => { | ... | @@ -300,8 +304,9 @@ const initGraph = () => { |
| 300 | labelCfg: { | 304 | labelCfg: { |
| 301 | offset: 10, | 305 | offset: 10, |
| 302 | style: { | 306 | style: { |
| 303 | fontSize: 16, | 307 | fontSize: 13, |
| 304 | fill: '#212121', | 308 | fill: '#212121', |
| 309 | fontWeight: 500 | ||
| 305 | }, | 310 | }, |
| 306 | position: !node.isField ? 'left' : 'right', //只有字段是最后一层级,不需要展开 | 311 | position: !node.isField ? 'left' : 'right', //只有字段是最后一层级,不需要展开 |
| 307 | }, | 312 | }, | ... | ... |
-
Please register or sign in to post a comment