xh-client-background/src/views/qyxypj/qypjdf/detail.vue

<script setup>
import request from "@/utils/request.js";
import {detailMap, titleMap} from "@/views/qyxypj/qypjdf/detailMap.js";
import { ref, onMounted } from 'vue';

const data = ref([]);

const getData = async () => {
  const res = await request('/basicData/xcrEBaseinfo/getCreditScoreMostDetailsByUniCode', {
    params: {
      uniCode: '91431227MA4LB1K97C'
    }
  });

  const dataList = [];
  for (let dataKey in res.data) {
    const temp = {
      key: dataKey,
      label: detailMap.get(dataKey),
      value: res.data[dataKey]
    };
    dataList.push(temp);
  }

  // 分组，每组分别包含前13个、14-20个、21-28个
  const groupedData = [
    dataList.slice(0, 13),
    dataList.slice(13, 20),
    dataList.slice(20, 28)
  ];

  data.value = groupedData;

  console.log(data.value);
};

const init = () => {
  getData();
};

onMounted(() => {
  init();
});
</script>

<template>
  <div>
    <div class="p-10px">
      <div>当前查询的企业:新晃中民燃气有限公司</div>
      <div>当前查询的统一社会信用代码:91431227MA4LB1K97C</div>
      <div>信用等级为:AAA</div>
      <div>总分为:91.00</div>
    </div>
    <div v-for="(group, groupIndex) in data" :key="groupIndex" class="mb-20px">
      <el-descriptions :title="titleMap.get(groupIndex+1)" :column="4" border>
        <el-descriptions-item v-for="(item, itemIndex) in group" :key="itemIndex" :label="item.label" width="100px">
          {{ item.value }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<style scoped lang="scss">
/* 你的样式 */
</style>