vue中，js获取svg内容并填充到svg图中
js获取svg内容并填充到svg图中
最近遇到一个需求，要求前端通过接口获取svg中的内容，并且填充到svg图中，接下来我就记录一下整个实现过程。
- 第一步，找到svg图中每一个需要填充的数据的key值，把所有key值交给后端，后端会根据key值把value返回给前端，如下代码中
<g id="Value11" fill="#00FF00" stroke="none" font-family="Arial" font-size="29.9999988079072" PB:DisplayPointName="9" PB:DisplayTimeStamp="9" PB:HorzAlign="0" PB:ShowUOM="False" PB:IsMultiState="False" PB:NumberFormat="0.00" PBD:PtTagName="\\10.37.169.174\tags.DT_BB02_sab10a0101r" PB:PersistString="" PB:PtTagStatus="0" PB:PtTagTime="1970/1/1 8:00:00" PB:PtTagValue="No Data" PB:Type="7" PB:Visible="True" PB:Scripting="True">
<rect id="Value11_pbTextBoundingRectEl" x="4387" y="782" width="142" height="40" fill="none" stroke-width="0">
</rect>
<text id="Value11_pbTextEl" x="4458" y="812" fill="#00FF00" stroke="none" font-family="Arial" font-size="29.9999988079072" text-anchor="middle" PBD:Property="value">No Data</text>
</g>
PBD:PtTagName=“\10.37.169.174\tags.DT_BB02_sab10a0101r” 这个属性代表key，tags.DT_BB02_sab10a0101r就是key值
- 第二步，获取数据并填充到对应key中去
querySvgTableById() {
let data = {
plantId: this.powerPlantId,
unitId: this.unitId,
svgtableId: this.currentSort + 1,
};
querySvgTableById(data).then((res) => {
this.svgData = res.data;
this.svgInfo();
});
},
svgInfo() {
try {
if (this.indexA != 0) {
let Econtent = document.getElementById("e-content");
let temp = document.getElementById("svgWrap");
Econtent.removeChild(temp);
}
this.indexA++;
let svg = "";
if (this.currentSort == 0) {
svg = require(`@/assets/svg/dtbb.svg`);
} else if (this.currentSort == 1) {
svg = require(`@/assets/svg/dtbb1.1.svg`);
} else if (this.currentSort == 2) {
svg = require(`@/assets/svg/dtbb1.2.svg`);
}
this.renderAsSvg(svg);
} catch (err) {
this.hasSvg = false;
}
},
async renderAsSvg(url) {
const xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.send();
xhr.addEventListener("load", async () => {
const resXml = xhr.responseXML;
this.svgDom = resXml.documentElement.cloneNode(true);
const oSerializer = new XMLSerializer();
const paths = this.svgDom.getElementsByTagName("path");
for (const item of paths) {
if (item.attributes.d.value) {
item.attributes.d.value = item.attributes.d.value.replace(
/[\r|\n]/g,
""
);
}
}
const text = this.svgDom.getElementsByTagName("text");
const textIds = [];
for (const item of text) {
if (item.innerHTML === "--") {
item.innerHTML = "@";
textIds.push(item.id);
}
}
await this.getSvgData(textIds);
const sXml = oSerializer.serializeToString(this.svgDom);
if (this.indexA == 1) {
const Profile = Vue.extend({
template: `<div id='svgWrap' style="margin-top:10px;">${sXml}</div>`,
});
new Profile().$mount("#e-content2");
} else {
var temp = document.createElement("div");
temp.id = "svgWrap";
temp.innerHTML = `${sXml}`;
document.getElementById("e-content").appendChild(temp);
}
// const Profile = Vue.extend({
// template: `<div id='svgWrap' style="margin-top:10px;">${sXml}</div>`,
// });
// new Profile().$mount("#e-content");
this.PSC(sXml);
for (let item in this.textIds) {
var s = document.getElementById(this.textIds[item]);
}
});
xhr.addEventListener("error", (err) => {
this.svgDom = null;
// this.hasSvg = false;
});
},
PSC(el) {
this.el = el;
this.prefix = {
tagName: "tagTextName__", // 测点名称的前缀
tagVal: "tagTextVal__", //测点值的前缀
tagUnit: "tagTextUnit__", //测点单位的前缀
tagState: "multistate__", //测点状态的前缀
};
/**
* 删除PB的标签
*/
// this.delPbLabel = function(){
var me = this;
var $svgDiv = $("svg");
// var $svgDiv = me.el;
$("defs").remove();
// $("pb\\:dataset").remove();
$("desc").remove();
$svgDiv.find("script").remove();
// $svgDiv.find('svg:first').attr('xmlns', "http://www.w3.org/2000/svg").attr('version', "1.0");
$svgDiv.attr("xmlns", svgPath).attr("version", '1.0').attr("id",this.currentSort+'_'+this.indexA).attr("PB:pid",'');
$svgDiv.removeAttr("xmlns:pbi").removeAttr("xmlns:pbd")
// $('rect,g,polygon,line,polyline,text,path').each(function(i, item){
$("rect,g,polygon,line,polyline,text,path").each(function (i, item) {
if (item.getAttribute("PB:Type") != null) {
$(item).attr("pbtype", item.getAttribute("PB:Type"));
}else if(item.getAttribute("pb:type") != null){
$(item).attr("pbtype", item.getAttribute("pb:type"));
}
if (item.getAttribute("PBD:PtTagName") != null) {
$(item).attr("pbdpttagname", item.getAttribute("PBD:PtTagName"));
}else if(item.getAttribute("pbd:pttagname") != null){
$(item).attr("pbdpttagname", item.getAttribute("pbd:pttagname"));
}
if (item.getAttribute("PB:IsMultiState") != null) {
$(item).attr("pbismultistate", item.getAttribute("PB:IsMultiState"));
}else if(item.getAttribute("pb:ismultistate") != null){
$(item).attr("pbismultistate", item.getAttribute("pb:ismultistate"));
}
// $(item).attr('pbtype', $(item).attr('pb:type')) // pb类型
// .attr('pbdpttagname', $(item).attr('pbd:pttagname')) //测点名
// .attr('pbismultistate', $(item).attr('pb:ismultistate')); // 是否状态
// item.attr('pbtype', item.attr('pb:type')).attr('pbdpttagname', item.attr('pbd:pttagname')).attr('pbismultistate', item.attr('pb:ismultistate'));
});
// 移除文本组中的rect标签
$svgDiv.find("g[pbtype='4'],g[pbtype='7']").find("rect").remove();
$("svg")
.removeAttr("pb:pid")
.removeAttr("xsi:schemalocation")
.removeAttr("image-rendering")
.removeAttr("xlink:xid")
.removeAttr("xmlns:svg")
.removeAttr("xmlns:BP")
.removeAttr("xmlns:PBI")
.removeAttr("xmlns:PBD")
.removeAttr("xmlns:xsi")
.removeAttr("onload");
// 移除带冒号的pd属性
$("rect,g,polygon,line,polyline,text,path")
.removeAttr("pb:docmajorversionnum")
.removeAttr("PB:docminorversionnum")
.removeAttr("PB:Docgroup")
.removeAttr("PB:Wnheight")
.removeAttr("PB:Wnwidth")
.removeAttr("PB:Wnstate")
.removeAttr("PB:Zoom")
.removeAttr("PB:Type")
.removeAttr("pb:type")
.removeAttr("PB:Namedvalues")
.removeAttr("PB:IsMultiState")
.removeAttr("PB:Visible")
.removeAttr("pb:visible")
.removeAttr("PB:Lineends")
.removeAttr("PB:LineStyle")
.removeAttr("PB:Strikethroughandunderline")
.removeAttr("PB:Fillcolor")
.removeAttr("PB:Fillstyle")
.removeAttr("PB:Backgroundcolor")
.removeAttr("PB:Tbhandle")
.removeAttr("PB:Rotation")
.removeAttr("PB:Flip")
.removeAttr("PB:Scripting")
.removeAttr("pb:scripting")
.removeAttr("PB:Archeight")
.removeAttr("PB:Arcleft")
.removeAttr("PB:Arcwidth")
.removeAttr("PB:Arctop")
.removeAttr("PB:Endangle")
.removeAttr("PB:Linecolor")
.removeAttr("PB:Startangle")
.removeAttr("PB:Endpoints")
.removeAttr("PB:Arcleft")
.removeAttr("PB:Localid")
.removeAttr("PB:Displayservertimezone")
.removeAttr("PB:Displaypointname")
.removeAttr("PB:Displaytimestamp")
.removeAttr("PB:Showuom")
.removeAttr("PB:Numberformat")
.removeAttr("PBD:Pttagname")
.removeAttr("PB:Persiststring")
.removeAttr("PB:Pttagtime")
.removeAttr("PB:Pttagstatus")
.removeAttr("PB:Pttagvalue")
.removeAttr("PBD:Property")
.removeAttr("PB:Flow")
.removeAttr("PB:Lower")
.removeAttr("PB:Orientation")
.removeAttr("PB:Start")
.removeAttr("PB:Upper")
.removeAttr("PB:horzalign");
// console.log("$svgDiv=>",$svgDiv)
// }
/**
* 测点值的展示信息定位
*/
// this.addTagInfo = function(){
// var me = this;
// var $svgDiv = $('#'+me.el);
var regStr = /\\{2}.+\\{1}/g;
// 找到所有标记测点值的地方
$svgDiv.find("g[pbtype='7']").each(function (i, item) {
var $item = $(item);
var tagName = $item
.attr("pbdpttagname")
.replace(regStr, "")
.toUpperCase();
if (me.svgData[i].key == tagName) {
$item
.find("text")
.attr("id", me.prefix.tagVal + tagName)
.attr("type", "tagTextVal")
.attr("tagname", tagName)
.text(me.svgData[i].value);
}
me.textIds.push(tagName);
var tagTextValX = $item.find("text").attr("x");
tagTextValX = tagTextValX ? parseFloat(tagTextValX) : undefined;
$item.siblings().each(function (i2, item2) {
var $text2 = $(item2).find("text");
if (tagTextValX) {
// 根据坐标定位测点名称和单位
var tagTextX = parseFloat($text2.attr("x"));
if (isNaN(tagTextX)) return false;
if (tagTextX < tagTextValX) {
me.textName.push($(item2).find("text")[0].innerHTML);
$text2
.attr("id", me.prefix.tagName + tagName)
.attr("type", "tagTextName");
} else if (tagTextX > tagTextValX) {
$text2
.attr("id", me.prefix.tagUnit + tagName)
.attr("type", "tagTextUnit");
}
} else {
// 没有坐标默认第一个为名称，第二个为单位
if (i2 == 0) {
$text2
.attr("id", me.prefix.tagName + tagName)
.attr("type", "tagTextName");
} else if (i2 == 1) {
$text2
.attr("id", me.prefix.tagUnit + tagName)
.attr("type", "tagTextUnit");
}
}
});
});
$svgDiv.find("g[pbtype='7']").each(function (i, item) {
});
// 找到状态位
$svgDiv.find("[pbismultistate='True']").each(function (i, item) {
var $item = $(item);
var pbdpttagname = $item.attr("pbdpttagname");
pbdpttagname = pbdpttagname
? pbdpttagname
: $item.find("pb\\:multistate").attr("pbd:pttagname");
if (pbdpttagname) {
var tagName = pbdpttagname.replace(regStr, "").toUpperCase();
if (tagName && tagName != "") {
$item
.attr("id", me.prefix.tagState + tagName)
.attr("type", "pb_multistate")
.attr("tagname", tagName);
}
}
});
// }
/**
* 初始化viewbox
*/
// this.doInitViewBox = function(){//处理初始化的viewbox
// var me = this;
var $svg = $(me.divId).find("svg:first");
var initViewBoxValues = [];
var $rect = $svgDiv.find("rect[pbtype='55']");
initViewBoxValues.push(0);
initViewBoxValues.push(0);
initViewBoxValues.push(185);
initViewBoxValues.push(185);
$svgDiv.get(0).setAttribute("viewBox", initViewBoxValues.join(" "));
// }
return true;
},
async getSvgData(keys) {
const params = {
tags: [],
codes: [],
};
keys.forEach((item) => {
if (item.includes("__")) {
const paramsKey = item.split("__")[1]; //__
paramsKey.includes("TAGS") || paramsKey.includes("CALS")
? params.tags.push(paramsKey)
: paramsKey.includes("TOTAL")
? params.codes.push(paramsKey)
: "";
}
});
},
每一步操作是什么意思备注中都已标注，如果有更好的方法，欢迎留言讨论。