<template>
|
<div>
|
<div v-if="filePath" v-html="svgHtml" />
|
<div v-else>暂未上传</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { getConfigure, getLiveData } from "@/api/svg/equipmentfile"
|
import { onMounted } from "vue"
|
const { proxy } = getCurrentInstance()
|
let props = defineProps(["nodeId"])
|
const emit = defineEmits(["getList"])
|
const currentNode = ref({})
|
const filePath = ref("")
|
const svgHtml = ref("")
|
const form = ref({
|
nodeId: "",
|
fileName: "",
|
svgType: "",
|
})
|
const tags = ref([])
|
const tagCodes = ref([])
|
const valueItems = ref(null)
|
const timer = ref(null)
|
|
function show(nodeId) {
|
console.log(nodeId)
|
tagCodes.value = []
|
filePath.value = ""
|
getConfigure(nodeId).then((response) => {
|
tags.value = []
|
svgHtml.value = ""
|
if (response.code === 200) {
|
if (response.data) {
|
filePath.value = response.data.filePath
|
tags.value = response.data.infoList
|
getSvg()
|
refresh()
|
}
|
} else {
|
proxy.$modal.msgError(response.msg)
|
}
|
})
|
}
|
|
function refresh() {
|
//console.log("refresh", tagCodes.value)
|
if (tagCodes.value.length === 0) {
|
return
|
}
|
getLiveData(tagCodes.value).then((response) => {
|
// console.log("tagCodes:::", tagCodes.value)
|
if (response.code === 200) {
|
if (response.data) {
|
response.data.forEach((tagValue) => {
|
let value = ""
|
if (tagValue.value) {
|
value = parseFloat(tagValue.value).toFixed(2)
|
} else {
|
value = "0"
|
}
|
// console.log("tagValue::",tagValue)
|
let el = document.getElementById(tagValue.tagCode)
|
if (el) {
|
// 判断tagValue.tagCode是不是以old或seven或out开头
|
if (tagValue.tagCode.startsWith("old") || tagValue.tagCode.startsWith("seven") || tagValue.tagCode.startsWith("out")) {
|
// 获取 el下的g标签下的text标签，赋值为value
|
let svgTextElement = el.querySelector("g").querySelector("text");
|
console.log("svgTextElement::",svgTextElement)
|
svgTextElement.textContent = value;
|
}else {
|
if (parseFloat(value) > 0) {
|
el.setAttribute("fill", "rgb(0,234,136)")
|
}else {
|
el.setAttribute("fill", "rgb(255,82,96)")
|
}
|
}
|
|
// console.log("el::",el)
|
// 将el的fill属性设置为23
|
|
|
|
|
}
|
})
|
//这块是单独加的 用来处理 没有指标或者指标没有结果的 都设置0
|
// let allText = document.getElementsByTagName("g")
|
// for (let i = 0; i < allText.length; i++) {
|
// // console.log(i + "textContent=" + allText[i].textContent);
|
// if (allText[i].textContent == null || allText[i].textContent == "") {
|
// allText[i].textContent = "0"
|
// }
|
// }
|
}
|
}
|
})
|
}
|
|
function refreshData() {
|
timer.value = setInterval(() => {
|
refresh()
|
}, 3000)
|
}
|
|
onMounted(() => {
|
refreshData()
|
})
|
|
onBeforeUnmount(() => {
|
clearInterval(timer.value)
|
})
|
|
// 初始化svg
|
function getSvg() {
|
/* 创建xhr对象 */
|
const xhr = new XMLHttpRequest()
|
xhr.open("GET", filePath.value, true)
|
xhr.send()
|
/* 监听xhr对象 */
|
xhr.addEventListener("load", () => {
|
const resXML = xhr.responseXML
|
let svgDom = resXML.documentElement.cloneNode(true)
|
let values = svgDom.getElementsByTagName("g")
|
for (let i = 0; i < values.length; i++) {
|
let tag_id = values[i].getAttribute("id");
|
let tag = tags.value.filter((f) => f.param === values[i].id.split("_")[0])
|
if (tag && tag.length > 0) {
|
let tagCode = tag[0].tag
|
|
if (tagCode) {
|
values[i].setAttribute("id", tagCode)
|
tagCodes.value.push(tagCode)
|
}
|
}
|
}
|
let oSerializer = new XMLSerializer()
|
svgHtml.value = oSerializer.serializeToString(svgDom)
|
})
|
}
|
|
defineExpose({ show })
|
</script>
|
|
<style lang="scss" scoped></style>
|
