Web/digital-agriculture-screen
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:调整路由

Browse Source
This commit is contained in:
李想 2025-04-24 17:34:26 +08:00
parent 86df7d9709
commit c0a6fc5afa
1 changed files with 52 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/views/land/components/LandAera.vue
View File

@ -1,36 +1,42 @@
<template>
<section class="land_area_all">
<section class="_left">
<section class="_circle"></section>
<section class="_text"></section>
<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' : '']">
<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>
<span class="_value">{{ item.value }}万亩</span>
</section>
</section>
</section>
</template>
<script setup>
import { ref, watch } from 'vue';
import { ref, watch, computed } from 'vue';
const props = defineProps({
data: {
type: Array,
default: () => {
return [
{ value: 60.8, label: '望天田' },
{ value: 60.6, label: '水浇地' },
{ value: 58.9, label: '灌溉水田' },
{ value: 56.1, label: '基地地' },
{ value: 56.0, label: '果园' },
{ value: 52.4, 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: '监测用地' },
];
@ -39,16 +45,21 @@ const props = defineProps({
});
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);
console.log('list', list.value);
},
{
@ -66,6 +77,15 @@ function randomColor() {
});
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);
console.log('s----------', currNum.value, allNum.value, s);
return s + '%';
});
</script>
<style lang="scss" scoped>
@ -81,8 +101,15 @@ function randomColor() {
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;
}
@ -92,9 +119,14 @@ function randomColor() {
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 {
@ -106,12 +138,19 @@ function randomColor() {
align-items: center;
height: 32px;
color: #fff;
.active {
background-color: rgba($color: #008f32, $alpha: 0.4);
box-shadow: 0 0 1px rgba($color: #008f32, $alpha: 08);
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 {
transform: scale(1.2);
font-size: 18px;
}
}
._label {