47 lines
1.1 KiB
Vue
47 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
data: {
|
|
diversity: number;
|
|
richness: number;
|
|
distribution: any[];
|
|
};
|
|
}>();
|
|
|
|
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> |