更新企业列表
This commit is contained in:
xiaozhang
parent
db23c98040
commit
e560788e56
|
|
@ -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')
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue