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

<script setup lang="ts">
const items = [{
  title: '土壤统计',
  value: 'soil',
}, {
  title: '产业统计',
  value: 'industry',
}]
const info = useInfoStore()
const data = computed(() => {
  return info.data[info.showIndex]
})

const selected = ref(0)

function change(value: number) {
  selected.value = value
}

const count = computed(() => {
  return selected ? data.value.info.industry.length : data.value.info.soil.length
})

const value = computed(() => {
  if (selected.value === 0) {
    return {
      count: data.value.info.soil.length,
      unit: '种',
      icon: 'solar:adhesive-plaster-line-duotone',
      title: '区域内现土壤总计',
      details: [{
        title: '养分特征数量',
        value: data.value.info.soil.reduce((a, b) => { return a + b.nutrient.length }, 0),
        icon: 'solar:atom-bold-duotone',
      }, {
        title: '土壤环境数量',
        value: data.value.info.soil.reduce((a, b) => { return a + b.env.length }, 0),
        icon: 'solar:bacteria-bold-duotone',
      }, {
        title: '微生物数量共计',
        value: data.value.info.soil.reduce((a, b) => { return a + b.microorganism_count }, 0),
        icon: 'solar:bug-bold-duotone',
      }],
      table: {
        columns: [{
          title: '类型',
          key: 'type',
        }, {
          title: '土壤养分特征',
          key: 'nutrient',
        }, {
          title: '土壤环境',
          key: 'env',
        }, {
          title: '微生物数量',
          key: 'microorganism_count',
        }],
        list: data.value.info.soil,
      },
    }
  }
  else {
    return {
      count: data.value.info.industry.length,
      unit: '个',
      icon: 'solar:buildings-broken',
      title: '区域内现产业总计',
      details: [{
        title: '农作物共计',
        value: data.value.info.industry.reduce((a, b) => { return a + b.crop.length }, 0),
        icon: 'solar:floor-lamp-bold-duotone',
      }, {
        title: '畜产品共计',
        value: data.value.info.industry.reduce((a, b) => { return a + b.livestock.length }, 0),
        icon: 'solar:dumbbells-bold-duotone',
      }, {
        title: '产业结构共计',
        value: new Set(data.value.info.industry.map(i => i.construction)).size,
        icon: 'solar:buildings-bold-duotone',
      }],
      table: {
        columns: [{
          title: '名称',
          key: 'name',
        }, {
          title: '产业结构',
          key: 'construction',
        }, {
          title: '高值化需求',
          key: 'premium_requirement',
        }],
        list: data.value.info.industry,
      },
    }
  }
})
</script>

<template>
  <FrameV1 title="概况统计">
    <div class="space-y-6 ">
      <TabsV2 v-model:model-value="selected" :items="items" :selected="selected" :change="change" />
      <DigitalV4 :title="value.title" :value="value.count" :unit="value.unit" :icon="value.icon" />
      <div class="flex justify-between">
        <DigitalV5 v-for="item in value.details" :key="item.title" v-bind="item" />
      </div>
    </div>

    <Table class="mt-6">
      <TableHeader class=" bg-white/5">
        <TableRow>
          <TableHead v-for="(item, i) in value.table?.columns" :key="item.key" class="h-8" :class="{ 'text-right': i === value.table.columns.length - 1 }">
            {{ item.title }}
          </TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow v-for="item in value.table?.list" :key="item.type">
          <TableCell v-for="(col, i) in value.table?.columns" :key="col.key" class="text-lg font-medium" :class="{ 'text-right': i === value.table.columns.length - 1 }">
            {{ Array.isArray(item[col.key]) ? item[col.key].join(', ') : item[col.key] }}
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </FrameV1>
</template>