Merge branch 'main' of http://47.109.205.240:3000/Web/digital-agriculture-screen

src/views/land/components/LandAera.vue

@@ -1,36 +1,42 @@
 <template>
   <section class="land_area_all">
     <section class="_left">
-      <section class="_circle"></section>
+      <section class="_circle">{{ _circleNum }}</section>
-      <section class="_text"></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: 60.8, label: '望天田' },
-        { value: 52.4, 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 {
+      cursor: pointer;
-        background-color: rgba($color: #008f32, $alpha: 0.4);
+      user-select: none;
-        box-shadow: 0 0 1px rgba($color: #008f32, $alpha: 08);
+      &.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 {