15085159322/ yqym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新企业列表

This commit is contained in:
xiaozhang 2024-03-05 16:14:31 +08:00
parent db23c98040
commit e560788e56
5 changed files with 184 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/router/index.js
View File

@ -18,6 +18,11 @@ const router = createRouter({
path: '/show', path: '/show',
name: 'show', name: 'show',
component: () => import('../views/show.vue') component: () => import('../views/show.vue')
},
{
path: '/test',
name: 'test',
component: () => import('../views/test.vue')
} }
] ]
}) })

125
src/views/home.vue
View File

@ -1,30 +1,51 @@
<template> <template>
<div> <div class="background">
<p style="color: blue; font-size: 24px;">贵州智信云科技有限公司</p> <p class="company-name">贵州智信云科技有限公司</p>
<div v-if="jsonData"> <div v-if="jsonData" style="padding-top: 20px;">
<div v-for="(field, fieldName) in jsonData.root.kczy.row[0]" :key="fieldName"> <div v-if="fieldLabels" v-for="fieldName in Object.keys(fieldLabels)" :key="fieldName">
<p v-if="getFieldLabel(fieldName)">{{ getFieldLabel(fieldName) }}: {{ field['#text'] }}</p> <p v-if="fieldLabels[fieldName]">{{ fieldLabels[fieldName] }}: {{ jsonData.root.kczy.row[0][fieldName]['#text'] }}</p>
</div> </div>
</div> </div>
<!-- <div> <div>
<div v-if="jsonData"> <img :src="qrCodeUrls[0].qrCodeUrl" class="custom-qr-code" />
<div v-for="(field, fieldName) in jsonData.root.kczy.row[0]" :key="fieldName"> </div>
<p>{{ fieldName }}: {{ field['#text'] }}</p>
</div>
</div>
</div> -->
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import { ref, onMounted } from 'vue';
import axios from 'axios'; import axios from 'axios';
import { fetchToken } from '../utils/getToken'; // 导入 fetchToken 函数 import { fetchToken } from '../utils/getToken'; // 导入 fetchToken 函数
import { xmlToJson } from '../utils/xmlToJson'; // 导入 xmlToJson 函数
import useQRCodeGenerator from '../utils/QRCodeGenerator';// 导入二维码生成器useQRCodeGenerator函数
const token = ref(''); const token = ref('');
const data = ref(''); const data = ref('');
const jsonData = ref(null); 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 函数
fetchToken().then((response) => { fetchToken().then((response) => {
if (response) { if (response) {
@ -38,9 +59,9 @@ const fetchData = async (token) => {
try { try {
const response = await axios.get(`api/seeyon/rest/dee/task/getMineral?token=${token.id}`); const response = await axios.get(`api/seeyon/rest/dee/task/getMineral?token=${token.id}`);
data.value = response.data; data.value = response.data;
const parser = new DOMParser(); // console.log(data.value);
const xmlDoc = parser.parseFromString(response.data, 'text/xml'); //调用xml转json的方法
const json = xmlToJson(xmlDoc); const json = xmlToJson(response.data);
jsonData.value = json; jsonData.value = json;
console.log(jsonData.value); console.log(jsonData.value);
} catch (error) { } 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> </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>

84
src/views/index.vue
View File

@ -1,31 +1,93 @@
<template> <template>
<div> <div class="background">
<div v-if="data">{{ data }}</div> <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> </div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'; import { ref, onMounted } from 'vue';
import axios from 'axios'; import axios from 'axios';
import { fetchToken } from '../utils/getToken'; // 导入 fetchToken 函数 import { fetchToken } from '../utils/getToken'; // 导入 fetchToken 函数
import { xmlToJson } from '../utils/xmlToJson'; // 导入 xmlToJson 函数
import useQRCodeGenerator from '../utils/QRCodeGenerator'; // 导入二维码生成器 useQRCodeGenerator 函数
const token = ref(''); 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 函数
fetchToken().then((response) => { onMounted(() => {
if (response) { fetchToken().then((response) => {
token.value = response; if (response) {
fetchData(response); // 获取 token 后调用 fetchData 函数 token.value = response;
} fetchData(response); // 获取 token 后调用 fetchData 函数
}
});
}); });
//加入token获取数据
// 加入 token 获取数据
const fetchData = async (token) => { const fetchData = async (token) => {
try { try {
const response = await axios.get(`api/seeyon/rest/dee/task/getMineral?token=${token.id}`); 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) { } catch (error) {
console.error(error); console.error(error);
} }
}; };
</script> </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>

5
src/views/show.vue
View File

@ -24,7 +24,7 @@
const jsonData = ref(null); const jsonData = ref(null);
// 定义字段的中文名称映射 // 定义字段的中文名称映射
const fieldLabels = { const fieldLabels = ({
FIELD0033: '地址', FIELD0033: '地址',
FIELD0013: '规划 ', FIELD0013: '规划 ',
FIELD0035: '联系人', FIELD0035: '联系人',
@ -33,7 +33,7 @@
FIELD0007: '产业条件', FIELD0007: '产业条件',
// ID: 'id', // ID: 'id',
// 添加其他字段的中文名称 // 添加其他字段的中文名称
}; });
//定义二维码地址 //定义二维码地址
const qrCodeUrls = ref([ const qrCodeUrls = ref([
@ -88,6 +88,7 @@
font-size: 24px; font-size: 24px;
text-align: center; text-align: center;
padding-top: 110px; /* 设置文本内容距离顶部的距离为 50 像素 */ padding-top: 110px; /* 设置文本内容距离顶部的距离为 50 像素 */
font-weight: bold;
} }
</style> </style>

96
src/views/test.vue
View File

@ -1,8 +1,13 @@
<template> <template>
<div> <div class="background">
<div v-if="jsonData"> <p class="company-name">企业列表</p>
<div v-for="(field, fieldName) in jsonData.root.kczy.row[0]" :key="fieldName"> <div v-if="jsonData" style="padding-top: 20px;">
<p v-if="fieldLabels[fieldName]">{{ fieldLabels[fieldName] }}: {{ field['#text'] }}</p> <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> </div>
</div> </div>
@ -10,21 +15,30 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useRouter } from 'vue-router'; // 使用 useRouter 获取 router 实例
import axios from 'axios'; import axios from 'axios';
import { fetchToken } from '../utils/getToken'; // 导入 fetchToken 函数 import { fetchToken } from '../utils/getToken'; // 导入 fetchToken 函数
import { xmlToJson } from '../utils/xmlToJson'; // 导入 xmlToJson 函数
const router = useRouter(); // 使用 useRouter 获取 router 实例
const token = ref(''); const token = ref('');
const data = ref(''); const data = ref('');
const jsonData = ref(null); const jsonData = ref(null);
// 定义字段的中文名称映射 // 定义字段的中文名称映射
const fieldLabels = { const fieldLabels = {
FIELD0013: '计划', FIELD0033: '公司',
FIELD0033: '地址', // ID: 'id',
FIELD0006: '建设条件',
FIELD0007: '产业条件'
// 添加其他字段的中文名称 // 添加其他字段的中文名称
}; };
const showCompanyInfo = (companyId, idValue) => {
// 导航到公司信息页面，并传递公司ID和ID数值
router.push({ name: 'index', params: { id: companyId} });
};
// 在组件加载时调用 fetchToken 函数 // 在组件加载时调用 fetchToken 函数
fetchToken().then((response) => { fetchToken().then((response) => {
if (response) { if (response) {
@ -38,51 +52,33 @@ const fetchData = async (token) => {
try { try {
const response = await axios.get(`api/seeyon/rest/dee/task/getMineral?token=${token.id}`); const response = await axios.get(`api/seeyon/rest/dee/task/getMineral?token=${token.id}`);
data.value = response.data; data.value = response.data;
const parser = new DOMParser(); // console.log(data.value);
const xmlDoc = parser.parseFromString(response.data, 'text/xml'); //调用xml转json的方法
const json = xmlToJson(xmlDoc); const json = xmlToJson(response.data);
jsonData.value = json; jsonData.value = json;
console.log(jsonData.value); // 打印 jsonData.value 的值 console.log(jsonData.value);
} catch (error) { } catch (error) {
console.error(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> </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>