125 lines
2.8 KiB
Vue
125 lines
2.8 KiB
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>
|