53 lines
1.3 KiB
Vue
53 lines
1.3 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
required: true,
|
|
validator: (value) => {
|
|
return (
|
|
typeof value.diversity === 'number' &&
|
|
typeof value.richness === 'number' &&
|
|
Array.isArray(value.distribution)
|
|
);
|
|
},
|
|
},
|
|
});
|
|
|
|
const diversityLevel = computed(() => {
|
|
const value = props.data.diversity;
|
|
if (value > 0.8) return { text: '高', type: 'success' };
|
|
if (value > 0.5) return { text: '中', type: 'warning' };
|
|
return { text: '低', type: 'danger' };
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="species-analysis">
|
|
<el-descriptions :column="3" border>
|
|
<el-descriptions-item label="多样性指数">
|
|
{{ data.diversity }}
|
|
<el-tag :type="diversityLevel.type" size="small">
|
|
{{ diversityLevel.text }}
|
|
</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="物种丰富度">
|
|
{{ data.richness }}
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
|
|
<!-- 分布情况图表 -->
|
|
<div class="distribution-chart">
|
|
<!-- 这里可以添加物种分布的图表展示 -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.species-analysis {
|
|
.distribution-chart {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
</style> |