完成接口调用

.gitignore

@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.vscode
 .DS_Store
 dist
 dist-ssr

src/views/home.vue

@@ -1,8 +1,18 @@
 <template>
   <div>
+    <p style="color: blue; font-size: 24px;">贵州智信云科技有限公司</p>
     <div v-if="jsonData">
-      <pre>{{ jsonData }}</pre>
+      <div v-for="(field, fieldName) in jsonData.root.kczy.row[0]" :key="fieldName">
+        <p v-if="getFieldLabel(fieldName)">{{ getFieldLabel(fieldName) }}: {{ field['#text'] }}</p>
+      </div>
     </div>
+    <!-- <div>
+      <div v-if="jsonData">
+        <div v-for="(field, fieldName) in jsonData.root.kczy.row[0]" :key="fieldName">
+          <p>{{ fieldName }}: {{ field['#text'] }}</p>
+        </div>
+      </div>
+    </div> -->
   </div>
 </template>
 
@@ -12,7 +22,7 @@ import axios from 'axios';
 import { fetchToken } from '../utils/getToken'; // 导入 fetchToken 函数
 
 const token = ref('');
-const data = ref('')
+const data = ref('');
 const jsonData = ref(null);
 
 // 在组件加载时调用 fetchToken 函数
@@ -23,7 +33,7 @@ fetchToken().then((response) => {
   }
 });
 
-// 加入token获取数据
+// 加入 token 获取数据
 const fetchData = async (token) => {
   try {
     const response = await axios.get(`api/seeyon/rest/dee/task/getMineral?token=${token.id}`);
@@ -31,7 +41,8 @@ const fetchData = async (token) => {
     const parser = new DOMParser();
     const xmlDoc = parser.parseFromString(response.data, 'text/xml');
     const json = xmlToJson(xmlDoc);
-    jsonData.value = JSON.stringify(json, null, 2);
+    jsonData.value = json;
+    console.log(jsonData.value);
   } catch (error) {
     console.error(error);
   }
@@ -74,4 +85,19 @@ function xmlToJson(xml) {
   return obj;
 }
 
+// 获取字段的中文名称
+function getFieldLabel(fieldName) {
+  const fieldLabels = {
+    FIELD0033: '地址',
+    FIELD0013: '规划 ',
+    FIELD0035: '联系人',
+    FIELD0037: '电话',
+    FIELD0006: '建设条件',
+    FIELD0007: '产业条件',
+    ID: 'id',
+
+    // 添加其他字段的中文名称
+  };
+  return fieldLabels[fieldName] || '';
+}
 </script>

src/views/show.vue

@@ -0,0 +1,11 @@
+<template>
+    
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+
+</style>

src/views/test.vue

@@ -1,17 +1,29 @@
 <template>
   <div>
-    <div v-if="jsonData">{{ jsonData }}</div>
+    <div v-if="jsonData">
+      <div v-for="(field, fieldName) in jsonData.root.kczy.row[0]" :key="fieldName">
+        <p v-if="fieldLabels[fieldName]">{{ fieldLabels[fieldName] }}: {{ field['#text'] }}</p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 import axios from 'axios';
-import xml2js from 'xml2js';
 import { fetchToken } from '../utils/getToken'; // 导入 fetchToken 函数
 
 const token = ref('');
-const jsonData = ref('');
+const data = ref('');
+const jsonData = ref(null);
+// 定义字段的中文名称映射
+const fieldLabels = {
+  FIELD0013: '计划',
+  FIELD0033: '地址',
+  FIELD0006: '建设条件',
+  FIELD0007: '产业条件'
+  // 添加其他字段的中文名称
+};
 
 // 在组件加载时调用 fetchToken 函数
 fetchToken().then((response) => {
@@ -21,22 +33,56 @@ fetchToken().then((response) => {
   }
 });
 
-// 加入token获取数据
+// 加入 token 获取数据
 const fetchData = async (token) => {
   try {
     const response = await axios.get(`api/seeyon/rest/dee/task/getMineral?token=${token.id}`);
-    const xmlData = response.data;
-
-    xml2js.parseString(xmlData, (err, result) => {
-      if (err) {
-        console.error(err);
-        return;
-      } else {
-        jsonData.value = JSON.stringify(result);
-      }
-    });
+    data.value = response.data;
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(response.data, 'text/xml');
+    const json = xmlToJson(xmlDoc);
+    jsonData.value = json;
+    console.log(jsonData.value); // 打印 jsonData.value 的值
   } catch (error) {
     console.error(error);
   }
 };
+
+// 将 XML 转换为 JSON
+function xmlToJson(xml) {
+  let obj = {};
+
+  if (xml.nodeType === 1) { // element
+    // do attributes
+    if (xml.attributes.length > 0) {
+      obj['@attributes'] = {};
+      for (let j = 0; j < xml.attributes.length; j++) {
+        const attribute = xml.attributes.item(j);
+        obj['@attributes'][attribute.nodeName] = attribute.nodeValue;
+      }
+    }
+  } else if (xml.nodeType === 3) { // text
+    obj = xml.nodeValue;
+  }
+
+  // do children
+  if (xml.hasChildNodes()) {
+    for (let i = 0; i < xml.childNodes.length; i++) {
+      const item = xml.childNodes.item(i);
+      const nodeName = item.nodeName;
+      if (typeof obj[nodeName] === 'undefined') {
+        obj[nodeName] = xmlToJson(item);
+      } else {
+        if (typeof obj[nodeName].push === 'undefined') {
+          const old = obj[nodeName];
+          obj[nodeName] = [];
+          obj[nodeName].push(old);
+        }
+        obj[nodeName].push(xmlToJson(item));
+      }
+    }
+  }
+  return obj;
+}
+
 </script>