127 lines
3.8 KiB
Vue
127 lines
3.8 KiB
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>
|