From e560788e56d02f764eda6e66eec828af1a573b61 Mon Sep 17 00:00:00 2001
From: xiaozhang <xiaozhang@123.com>
Date: Tue, 5 Mar 2024 16:14:31 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BC=81=E4=B8=9A=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js |   5 ++
 src/views/home.vue  | 125 ++++++++++++++++++++------------------------
 src/views/index.vue |  84 +++++++++++++++++++++++++----
 src/views/show.vue  |   5 +-
 src/views/test.vue  |  96 ++++++++++++++++------------------
 5 files changed, 184 insertions(+), 131 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index 75dbae1..778ec01 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -18,6 +18,11 @@ const router = createRouter({
       path: '/show',
       name: 'show',
       component: () => import('../views/show.vue')
+    },
+    {
+      path: '/test',
+      name: 'test',
+      component: () => import('../views/test.vue')
     }
   ]
 })
diff --git a/src/views/home.vue b/src/views/home.vue
index 6fb56b4..d04f27a 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,30 +1,51 @@
 <template>
-  <div>
-    <p style="color: blue; font-size: 24px;">贵州智信云科技有限公司</p>
-    <div v-if="jsonData">
-      <div v-for="(field, fieldName) in jsonData.root.kczy.row[0]" :key="fieldName">
-        <p v-if="getFieldLabel(fieldName)">{{ getFieldLabel(fieldName) }}: {{ field['#text'] }}</p>
+  <div class="background">
+    <p class="company-name">贵州智信云科技有限公司</p>
+    <div v-if="jsonData" style="padding-top: 20px;">
+      <div v-if="fieldLabels" v-for="fieldName in Object.keys(fieldLabels)" :key="fieldName">
+        <p v-if="fieldLabels[fieldName]">{{ fieldLabels[fieldName] }}: {{ jsonData.root.kczy.row[0][fieldName]['#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>
+      <img :src="qrCodeUrls[0].qrCodeUrl" class="custom-qr-code" />
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import axios from 'axios';
 import { fetchToken } from '../utils/getToken'; // 导入 fetchToken 函数
+import { xmlToJson } from '../utils/xmlToJson'; // 导入 xmlToJson 函数
+import useQRCodeGenerator from '../utils/QRCodeGenerator';// 导入二维码生成器useQRCodeGenerator函数
 
 const token = ref('');
 const data = ref('');
 const jsonData = ref(null);
 
+// 定义字段的中文名称映射
+const fieldLabels = {
+  FIELD0035: '联系人',
+  FIELD0037: '电话',
+  FIELD0033: '地址',
+  FIELD0013: '规划 ',
+  FIELD0006: '建设条件',
+  FIELD0007: '产业条件',
+  ID: 'id',
+  // 添加其他字段的中文名称
+}
+  //定义二维码地址
+const qrCodeUrls = ref([
+  useQRCodeGenerator('https://zwy.guizhoujc.com/inc/xmtzk/kc/show-kc.html?id=974420865978944870')
+]);
+
+// 生成二维码函数
+onMounted(() => {
+  qrCodeUrls.value.forEach((generator) => {
+    generator.generateQRCode(generator.initialUrl);
+  });
+});
+
 // 在组件加载时调用 fetchToken 函数
 fetchToken().then((response) => {
   if (response) {
@@ -38,9 +59,9 @@ const fetchData = async (token) => {
   try {
     const response = await axios.get(`api/seeyon/rest/dee/task/getMineral?token=${token.id}`);
     data.value = response.data;
-    const parser = new DOMParser();
-    const xmlDoc = parser.parseFromString(response.data, 'text/xml');
-    const json = xmlToJson(xmlDoc);
+    // console.log(data.value);
+    //调用xml转json的方法
+    const json = xmlToJson(response.data);
     jsonData.value = json;
     console.log(jsonData.value);
   } catch (error) {
@@ -48,56 +69,24 @@ const fetchData = async (token) => {
   }
 };
 
-// 将 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;
-}
-
-// 获取字段的中文名称
-function getFieldLabel(fieldName) {
-  const fieldLabels = {
-    FIELD0033: '地址',
-    FIELD0013: '规划 ',
-    FIELD0035: '联系人',
-    FIELD0037: '电话',
-    FIELD0006: '建设条件',
-    FIELD0007: '产业条件',
-    ID: 'id',
-
-    // 添加其他字段的中文名称
-  };
-  return fieldLabels[fieldName] || '';
-}
 </script>
+
+<style scoped>
+.background {
+  background-image: url("../assets/img/index.png");
+  background-size:100% 100%;
+  background-position: center;
+  /* 其他样式属性 */
+}
+*{
+  margin: 0;
+  padding: 0;
+}
+.company-name {
+  color: blue;
+  font-size: 24px;
+  text-align: center;
+  padding-top: 110px; /* 设置文本内容距离顶部的距离为 50 像素 */
+  font-weight: bold;
+}
+</style>
diff --git a/src/views/index.vue b/src/views/index.vue
index d6af7b2..abded85 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,31 +1,93 @@
 <template>
-  <div>
-    <div v-if="data">{{ data }}</div>
+  <div class="background">
+    <p class="company-name">贵州智信云科技有限公司</p>
+    <div v-if="companyData" style="padding-top: 20px;">
+      <div v-for="fieldName in Object.keys(fieldLabels)" :key="fieldName">
+        <p v-if="fieldLabels[fieldName]">{{ fieldLabels[fieldName] }}: {{ companyData[fieldName]['#text'] }}</p>
+      </div>
+    </div>
+    <div>
+      <img :src="qrCodeUrls[0].qrCodeUrl" class="custom-qr-code" />
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import axios from 'axios';
 import { fetchToken } from '../utils/getToken'; // 导入 fetchToken 函数
+import { xmlToJson } from '../utils/xmlToJson'; // 导入 xmlToJson 函数
+import useQRCodeGenerator from '../utils/QRCodeGenerator'; // 导入二维码生成器 useQRCodeGenerator 函数
 
 const token = ref('');
-const data = ref('');
+const companyData = ref(null);
+
+// 定义字段的中文名称映射
+const fieldLabels = {
+  FIELD0035: '联系人',
+  FIELD0037: '电话',
+  FIELD0033: '地址',
+  FIELD0013: '规划 ',
+  FIELD0006: '建设条件',
+  FIELD0007: '产业条件',
+  ID: 'id',
+  // 添加其他字段的中文名称
+};
+
+// 定义二维码地址
+const qrCodeUrls = ref([
+  useQRCodeGenerator('https://zwy.guizhoujc.com/inc/xmtzk/kc/show-kc.html?id=974420865978944870')
+]);
 
 // 在组件加载时调用 fetchToken 函数
-fetchToken().then((response) => {
-  if (response) {
-    token.value = response;
-    fetchData(response); // 获取 token 后调用 fetchData 函数
-  }
+onMounted(() => {
+  fetchToken().then((response) => {
+    if (response) {
+      token.value = response;
+      fetchData(response); // 获取 token 后调用 fetchData 函数
+    }
+  });
 });
-//加入token获取数据
+
+// 加入 token 获取数据
 const fetchData = async (token) => {
   try {
     const response = await axios.get(`api/seeyon/rest/dee/task/getMineral?token=${token.id}`);
-    data.value = response.data;
+    const jsonData = xmlToJson(response.data);
+    console.log(jsonData);
+    // 假设ID在这里是从路由中获取的，你需要根据实际情况获取ID
+    const companyId = '974420865978944870'; // 获取路由参数中的公司 ID
+    const company = jsonData.root.kczy.row.find((row) => row.ID['#text'] === companyId);
+    console.log(company);
+    if (company) {
+      companyData.value = company;
+    } else {
+      console.error('Company not found');
+    }
   } catch (error) {
     console.error(error);
   }
 };
 </script>
+
+<style scoped>
+.background {
+  background-image: url("../assets/img/index.png");
+  background-size: 100% 100%;
+  background-position: center;
+  /* 其他样式属性 */
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.company-name {
+  color: blue;
+  font-size: 24px;
+  text-align: center;
+  padding-top: 110px; /* 设置文本内容距离顶部的距离为 50 像素 */
+  font-weight: bold;
+}
+</style>
diff --git a/src/views/show.vue b/src/views/show.vue
index ae6e394..4e1916f 100644
--- a/src/views/show.vue
+++ b/src/views/show.vue
@@ -24,7 +24,7 @@
   const jsonData = ref(null);
   
   // 定义字段的中文名称映射
-  const fieldLabels = {
+  const fieldLabels = ({
     FIELD0033: '地址',
     FIELD0013: '规划 ',
     FIELD0035: '联系人',
@@ -33,7 +33,7 @@
     FIELD0007: '产业条件',
     // ID: 'id',
     // 添加其他字段的中文名称
-  };
+  });
 
     //定义二维码地址
   const qrCodeUrls = ref([
@@ -88,6 +88,7 @@
     font-size: 24px;
     text-align: center;
     padding-top: 110px; /* 设置文本内容距离顶部的距离为 50 像素 */
+    font-weight: bold;
   }
   </style>
   
\ No newline at end of file
diff --git a/src/views/test.vue b/src/views/test.vue
index a18dba9..45cac94 100644
--- a/src/views/test.vue
+++ b/src/views/test.vue
@@ -1,8 +1,13 @@
 <template>
-  <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 class="background">
+    <p class="company-name">企业列表</p>
+    <div v-if="jsonData" style="padding-top: 20px;">
+      <div v-for="(row, rowIndex) in jsonData.root.kczy.row" :key="rowIndex">
+        <div v-for="(value, fieldName) in row" :key="fieldName">
+          <p v-if="fieldLabels[fieldName]" @click="showCompanyInfo(value['#text'])">
+            {{ fieldLabels[fieldName] }}: {{ value['#text'] }}
+          </p>
+        </div>
       </div>
     </div>
   </div>
@@ -10,21 +15,30 @@
 
 <script setup>
 import { ref } from 'vue';
+import { useRouter } from 'vue-router'; // 使用 useRouter 获取 router 实例
 import axios from 'axios';
 import { fetchToken } from '../utils/getToken'; // 导入 fetchToken 函数
+import { xmlToJson } from '../utils/xmlToJson'; // 导入 xmlToJson 函数
+
+const router = useRouter(); // 使用 useRouter 获取 router 实例
 
 const token = ref('');
 const data = ref('');
 const jsonData = ref(null);
+
 // 定义字段的中文名称映射
 const fieldLabels = {
-  FIELD0013: '计划',
-  FIELD0033: '地址',
-  FIELD0006: '建设条件',
-  FIELD0007: '产业条件'
+  FIELD0033: '公司',
+  // ID: 'id',
   // 添加其他字段的中文名称
 };
 
+const showCompanyInfo = (companyId, idValue) => {
+  // 导航到公司信息页面，并传递公司ID和ID数值
+  router.push({ name: 'index', params: { id: companyId} });
+};
+
+
 // 在组件加载时调用 fetchToken 函数
 fetchToken().then((response) => {
   if (response) {
@@ -38,51 +52,33 @@ const fetchData = async (token) => {
   try {
     const response = await axios.get(`api/seeyon/rest/dee/task/getMineral?token=${token.id}`);
     data.value = response.data;
-    const parser = new DOMParser();
-    const xmlDoc = parser.parseFromString(response.data, 'text/xml');
-    const json = xmlToJson(xmlDoc);
+    // console.log(data.value);
+    //调用xml转json的方法
+    const json = xmlToJson(response.data);
     jsonData.value = json;
-    console.log(jsonData.value); // 打印 jsonData.value 的值
+    console.log(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>
+
+<style scoped>
+.background {
+  background-image: url("../assets/img/index.png");
+  background-size: 100% 100%;
+  background-position: center;
+  /* 其他样式属性 */
+}
+*{
+  margin: 0;
+  padding: 0;
+}
+.company-name {
+  color: blue;
+  font-size: 24px;
+  text-align: center;
+  padding-top: 110px; /* 设置文本内容距离顶部的距离为 50 像素 */
+  font-weight: bold;
+}
+</style>