173 lines
4.0 KiB
Vue
173 lines
4.0 KiB
Vue
<template>
|
|
<section class="land_area_all">
|
|
<section class="_left">
|
|
<section class="_circle">{{ _circleNum }}</section>
|
|
<section class="_text">{{ allNum }}万亩</section>
|
|
</section>
|
|
<section class="_right _scroll">
|
|
<section
|
|
v-for="(item, i) in list"
|
|
:key="`right_${i}`"
|
|
class="list_item w100"
|
|
:class="[item.id == ac ? 'active' : '']"
|
|
@click="handleAc(item.id)"
|
|
>
|
|
<span class="_label">
|
|
<span class="_spot" :style="{ background: item.color }"></span>
|
|
{{ item.label }}
|
|
</span>
|
|
<span class="_value">{{ item.value }}万亩</span>
|
|
</section>
|
|
</section>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, computed } from 'vue';
|
|
const props = defineProps({
|
|
data: {
|
|
type: Array,
|
|
default: () => {
|
|
return [
|
|
{ value: 58.9, label: '灌溉水田' },
|
|
{ value: 56.1, label: '基地地' },
|
|
{ value: 60.8, label: '望天田' },
|
|
{ value: 60.6, label: '水浇地' },
|
|
{ value: 32.6, label: '林地' },
|
|
{ value: 25.8, label: '育苗地' },
|
|
{ value: 56.0, label: '果园' },
|
|
{ value: 52.4, label: '草地' },
|
|
{ value: 6.3, label: '观测用地' },
|
|
{ value: 6.1, label: '监测用地' },
|
|
];
|
|
},
|
|
},
|
|
});
|
|
const list = ref([]);
|
|
const ac = ref(0);
|
|
const allNum = ref(0);
|
|
const currNum = ref(0);
|
|
|
|
watch(
|
|
() => props.data,
|
|
() => {
|
|
list.value = props.data.map((v, i) => {
|
|
allNum.value += v.value;
|
|
return {
|
|
id: i,
|
|
...v,
|
|
color: randomColor(),
|
|
};
|
|
});
|
|
list.value.sort((a, b) => b.value - a.value);
|
|
},
|
|
{
|
|
immediate: true,
|
|
}
|
|
);
|
|
function randomColor() {
|
|
let obj = {
|
|
r: 0,
|
|
g: 0,
|
|
b: 0,
|
|
};
|
|
Object.keys(obj).forEach((key) => {
|
|
obj[key] = Math.floor(Math.random() * 256);
|
|
});
|
|
return `rgb(${obj.r},${obj.g},${obj.b})`;
|
|
}
|
|
function handleAc(val) {
|
|
ac.value = val;
|
|
currNum.value = list.value.find((v) => v.id == val).value ?? 0;
|
|
}
|
|
const _circleNum = computed(() => {
|
|
let s = ((currNum.value / allNum.value) * 100).toFixed(1);
|
|
return s + '%';
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.land_area_all {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20px;
|
|
height: 100%;
|
|
._left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 100%;
|
|
._circle {
|
|
padding-top: 18%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: 'JinBuTi';
|
|
width: 80%;
|
|
aspect-ratio: 1/1;
|
|
font-size: 18px;
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
background: url('../../../assets/images/land/countCircleBG.png') no-repeat center center / cover;
|
|
}
|
|
._text {
|
|
width: 100%;
|
|
height: 40px;
|
|
background: url('../../../assets/images/land/countTextBG.png') no-repeat center center / cover;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
color: #fff;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
text-shadow: 0 0 4px #fff;
|
|
}
|
|
}
|
|
._right {
|
|
padding-right: 4px;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
.list_item {
|
|
padding: 0 24px;
|
|
position: relative;
|
|
display: flex;
|
|
grid-template-columns: 60% 40%;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 32px;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
&.active {
|
|
background-color: rgba($color: #4aeb82, $alpha: 0.4);
|
|
border: 1px solid rgba($color: #008f32, $alpha: 08);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
.spot {
|
|
transform: scale(1.2);
|
|
}
|
|
._label,
|
|
._value {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
._label {
|
|
._spot {
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 8px;
|
|
top: 50%;
|
|
transform: translateY(-25%);
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
._value {
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|