svg

ali

2025-02-10 d22576ed1352cf5b9046a13ff1be12fb9b15cf2c

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<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() {
  if (tagCodes.value.length === 0) {
    return
  }
  getLiveData(tagCodes.value).then((response) => {
    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"
          }
 
          let el = document.getElementById(tagValue.tagCode)
          if (el) {
            el.textContent = value
          }
        })
        //这块是单独加的 用来处理 没有指标或者指标没有结果的 都设置0
        let allText = document.getElementsByTagName("text")
        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("text")
    for (let i = 0; i < values.length; i++) {
      let tag = tags.value.filter((f) => f.param === values[i].textContent)
      if (tag && tag.length > 0) {
        let tagCode = tag[0].tag
        values[i].textContent = ""
        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>