RuralDatabase/apps/web/components/section/one.vue

<script setup lang="ts">
const info = useInfoStore()

const data = computed(() => {
  return info.data[info.showIndex]
})

const list = computed(() => {
  return [{
    name: '地区名称',
    value: data.value.name,
  }, {
    name: '经纬度',
    value: data.value.value.join(','),
  }, {
    name: '收集年份',
    value: `${data.value.info.collect_year}年`,
  }, {
    name: '经济面积',
    value: `${data.value.info.economic.area}平方米`,
  }, {
    name: '人口总数',
    value: data.value.info.economic.population,
  }, {
    name: '人均收入',
    value: `${data.value.info.economic.revenue}元/年`,
  }]
})

const digitals = computed(() => {
  return [
    {
      title: '气温(℃)',
      value: data.value.info.climate.temperature,
    },
    {
      title: '降水量(cc)',
      value: data.value.info.climate.precipitation,
    },
    {
      title: '日照时长(小时)',
      value: data.value.info.climate.sunshine,
    },
    {
      title: '土壤种类',
      value: data.value.info.soil.length,
    },
    {
      title: '产业',
      value: data.value.info.industry.length,
    },
    {
      title: '资源化技术',
      value: data.value.info.garbage_feature.data.length,
    },
  ]
})

const digitalsV2 = computed(() => {
  return data.value.info.garbage_feature.data.map(i => ({
    title: i.type,
    value: i.details.length,
    unit: '项',
    icon: i.icon,
  }))
})

const i = [
  {
    title: '公寓',
    value: 123,
    unit: '加',
    icon: 'solar:airbuds-remove-line-duotone',
  },
  {
    title: '停车位',
    value: 123,
    unit: '加',
    icon: 'solar:airbuds-remove-line-duotone',
  },
  {
    title: '超市',
    value: 123,
    unit: '加',
    icon: 'solar:airbuds-remove-line-duotone',
  },
  {
    title: '扒拉',
    value: 123,
    unit: '加',
    icon: 'solar:airbuds-remove-line-duotone',
  },
]
</script>

<template>
  <FrameV1 title="地区简介">
    <div class="">
      <div class="grid grid-cols-2 gap-1 px-6">
        <div v-for="(item, index) in list" :key="index" class="grid grid-cols-5 ">
          <div class="col-span-2 font-medium text-[12px] text-[#E4F3FF] opacity-60">
            {{ item.name }} :
          </div>
          <div class="col-span-3 font-medium text-[14px] text-[#D9F1FD]">
            {{ item.value }}
          </div>
        </div>
      </div>

      <div class="grid grid-cols-3 mt-4 gap-x-5">
        <DigitalV1 v-for="(item, index) in digitals" :key="index" v-bind="item" />
      </div>
      <div class="flex items-center justify-center mt-6 mb-4">
        <TitleV1 title="地区废弃物特征库" />
      </div>

      <div class="w-full">
        <div class="grid grid-cols-2 mx-auto gap-x-4 w-fit -gap-1">
          <DigitalV2 v-for="(item, index) in digitalsV2" :key="index" v-bind="item" />
        </div>
      </div>
    </div>
  </FrameV1>
</template>