Skip to content
Toggle navigation
P
Projects
G
Groups
S
Snippets
Help
liangzhen
/
framework-tools-web
This project
Loading...
Sign in
Toggle navigation
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Snippets
Settings
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit c10019bb
authored
Mar 15, 2024
by
liuyong
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
修改bug
1 parent
21e89caf
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
28 additions
and
28 deletions
src/views/archi-ele-list/index.vue
src/views/archi-ele-list/index.vue
View file @
c10019b
...
...
@@ -53,8 +53,8 @@
<el-table-column
prop=
"content"
label=
"描述"
align=
"center"
width=
"200"
:show-overflow-tooltip=
"true"
></el-table-column>
<el-table-column
label=
"图标"
align=
"center"
>
<template
slot-scope=
"scope"
>
<
!--
<img
:src=
"scope.row.icon"
alt=
""
style=
"width: 100px;height: 100px;"
>
--
>
<
div
v-html=
"scope.row.icon"
style=
"display: flex;justify-content: center;"
></div
>
<
img
:src=
"scope.row.icon"
alt=
""
:style=
"
{ 'width': scope.row.width, 'height': scope.row.height }"
>
<
!--
<div
v-html=
"scope.row.icon"
style=
"display: flex;justify-content: center;"
></div>
--
>
</
template
>
</el-table-column>
<el-table-column
prop=
"version"
label=
"版本"
align=
"center"
></el-table-column>
...
...
@@ -1008,34 +1008,34 @@ export default {
result
.
data
.
records
.
map
(
item
=>
{
if
(
item
.
icon
.
includes
(
"svg+xml"
))
{
//
const item_icon = item.icon.split("base64,")[1];
//
const decode_item_icon = window.atob(item_icon);//svg解码,为字符串
//
const svgDocument = new DOMParser().parseFromString(decode_item_icon, 'text/xml');//svg字符串转标签
//
//
console.log(svgDocument)
//
const path = svgDocument.getElementsByTagName('path')[0];
//
const rect = svgDocument.getElementsByTagName('rect')[0];
//
const ellipse = svgDocument.getElementsByTagName('ellipse')[0];
//
const svgTag = svgDocument.getElementsByTagName('svg')[0];
//
const svgWidth = Number(svgTag.getAttribute('width').split('px')[0])/2;
//
const svgHeight = Number(svgTag.getAttribute('height').split('px')[0])/2;
//
item['width'] = svgWidth + 'px';
//
item['height'] = svgHeight + 'px';
const
item_icon
=
item
.
icon
.
split
(
"base64,"
)[
1
];
const
decode_item_icon
=
window
.
atob
(
item_icon
);
//svg解码,为字符串
const
svgDocument
=
new
DOMParser
().
parseFromString
(
decode_item_icon
,
'text/xml'
);
//svg字符串转标签
// console.log(svgDocument)
const
path
=
svgDocument
.
getElementsByTagName
(
'path'
)[
0
];
const
rect
=
svgDocument
.
getElementsByTagName
(
'rect'
)[
0
];
const
ellipse
=
svgDocument
.
getElementsByTagName
(
'ellipse'
)[
0
];
const
svgTag
=
svgDocument
.
getElementsByTagName
(
'svg'
)[
0
];
const
svgWidth
=
Number
(
svgTag
.
getAttribute
(
'width'
).
split
(
'px'
)[
0
])
/
2
;
const
svgHeight
=
Number
(
svgTag
.
getAttribute
(
'height'
).
split
(
'px'
)[
0
])
/
2
;
item
[
'width'
]
=
svgWidth
+
'px'
;
item
[
'height'
]
=
svgHeight
+
'px'
;
//
if(path) {
//
path.setAttribute('fill', item.color);
//
}
//
if(rect) {
//
rect.setAttribute('fill', item.color);
//
}
//
if(ellipse) {
//
ellipse.setAttribute('fill', item.color);
//
}
//
const svgToString = new XMLSerializer().serializeToString(svgDocument);//svg标签转化为字符串
//
const encode_item_icon = window.btoa(svgToString);//base64编码
//
item.icon = 'data:image/svg+xml;base64,'+ encode_item_icon;
if
(
path
)
{
path
.
setAttribute
(
'fill'
,
item
.
color
);
}
if
(
rect
)
{
rect
.
setAttribute
(
'fill'
,
item
.
color
);
}
if
(
ellipse
)
{
ellipse
.
setAttribute
(
'fill'
,
item
.
color
);
}
const
svgToString
=
new
XMLSerializer
().
serializeToString
(
svgDocument
);
//svg标签转化为字符串
const
encode_item_icon
=
window
.
btoa
(
svgToString
);
//base64编码
item
.
icon
=
'data:image/svg+xml;base64,'
+
encode_item_icon
;
const
svgToString
=
'<svg style="left: 1px; top: 1px; width: 32px; height: 30px; display: block; position: relative; overflow: hidden; pointer-events: none;"><g style="pointer-events: none;"><g style="pointer-events: none;"></g><g style="pointer-events: none;"><g transform="translate(0.5,0.5)" style="visibility: visible; pointer-events: none;"><rect x="1" y="7.5" width="30" height="15" fill="none" stroke="white" visibility="hidden" stroke-width="9" style="pointer-events: none;"></rect><rect x="1" y="7.5" width="30" height="15" fill="none" stroke="none" style="pointer-events: none;"></rect></g><g style="pointer-events: none;"><g transform="scale(0.5)" style="pointer-events: none;"><foreignObject width="200%" height="200%" style="overflow: visible; text-align: left; pointer-events: none;"><div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 30px; margin-left: 3px; pointer-events: none;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center; pointer-events: none;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">Text</div></div></div></foreignObject></g></g></g><g style="pointer-events: none;"></g><g style="pointer-events: none;"></g></g></svg>'
;
item
.
icon
=
svgToString
;
//
const svgToString = '<svg style="left: 1px; top: 1px; width: 32px; height: 30px; display: block; position: relative; overflow: hidden; pointer-events: none;"><g style="pointer-events: none;"><g style="pointer-events: none;"></g><g style="pointer-events: none;"><g transform="translate(0.5,0.5)" style="visibility: visible; pointer-events: none;"><rect x="1" y="7.5" width="30" height="15" fill="none" stroke="white" visibility="hidden" stroke-width="9" style="pointer-events: none;"></rect><rect x="1" y="7.5" width="30" height="15" fill="none" stroke="none" style="pointer-events: none;"></rect></g><g style="pointer-events: none;"><g transform="scale(0.5)" style="pointer-events: none;"><foreignObject width="200%" height="200%" style="overflow: visible; text-align: left; pointer-events: none;"><div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 30px; margin-left: 3px; pointer-events: none;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center; pointer-events: none;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">Text</div></div></div></foreignObject></g></g></g><g style="pointer-events: none;"></g><g style="pointer-events: none;"></g></g></svg>';
//
item.icon = svgToString;
}
else
{
item
[
'width'
]
=
0
;
item
[
'height'
]
=
0
;
...
...
Write
Preview
Markdown
is supported
Attach a file
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to post a comment