From efa30129c50d3d8b0766c8b8d0d84b125c31564a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=9A=E4=BF=8A=E6=97=AD?= <398847134@qq.com>
Date: Thu, 22 May 2025 09:09:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E5=9C=9F=E5=9C=B0=E8=B5=84?=
 =?UTF-8?q?=E6=BA=90=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/land/components/basicInfo.vue   |  60 +++++++++
 .../src/views/land/components/landOne.vue     |   9 +-
 .../src/views/land/components/warning.vue     | 118 ++++++++++++++++++
 .../src/views/land/index.vue                  |  83 ++++++------
 4 files changed, 220 insertions(+), 50 deletions(-)
 create mode 100644 new-digital-agriculture-screen/src/views/land/components/basicInfo.vue
 create mode 100644 new-digital-agriculture-screen/src/views/land/components/warning.vue

diff --git a/new-digital-agriculture-screen/src/views/land/components/basicInfo.vue b/new-digital-agriculture-screen/src/views/land/components/basicInfo.vue
new file mode 100644
index 0000000..ae246de
--- /dev/null
+++ b/new-digital-agriculture-screen/src/views/land/components/basicInfo.vue
@@ -0,0 +1,60 @@
+<template>
+  <div style="width: 100%; height: 100%">
+    <div class="basic">
+      <div v-for="(item, index) in data" :key="index" class="line">
+        <div class="title">{{ item.title }}</div>
+        <div class="values">{{ item.value }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+/* --------------- data --------------- */
+// #region
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped>
+.basic {
+  width: 100%;
+  margin-top: 10px;
+  height: 100%;
+  border: 2px solid #01fefd;
+  border-radius: 16px;
+  backdrop-filter: blur(2px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  color: #ffffff;
+  padding: 20px;
+  .line {
+    display: flex;
+    justify-content: space-between;
+    text-align: left;
+    line-height: 20px;
+    .title {
+      font-size: 16px;
+      width: 40%;
+    }
+    .values {
+      font-size: 20px;
+      width: 60%;
+    }
+  }
+}
+</style>
diff --git a/new-digital-agriculture-screen/src/views/land/components/landOne.vue b/new-digital-agriculture-screen/src/views/land/components/landOne.vue
index 51e5bf3..8c7cf27 100644
--- a/new-digital-agriculture-screen/src/views/land/components/landOne.vue
+++ b/new-digital-agriculture-screen/src/views/land/components/landOne.vue
@@ -13,6 +13,7 @@ const props = defineProps({
 });
 
 const state = reactive({
+  total: 0, // 存储所有乡镇面积总和
   option: {
     grid: {
       left: '5%',
@@ -31,11 +32,12 @@ const state = reactive({
       borderRadius: 8,
       formatter: (data) => {
         const params = data[0];
-        let str = `<div class="custom-echarts-tips" >
+        const percentage = ((params.value / state.total) * 100).toFixed(2);
+        return `<div class="custom-echarts-tips" >
           <span>${params.name}</span><br/>
-          <span>${params.marker} ${params.data} 万亩</span>
+          <span>${params.marker} ${params.data} km²</span><br/>
+          <span>占比 ${percentage}%</span>
         </div>`;
-        return str;
       },
       extraCssText: 'backdrop-filter: blur(8px);',
     },
@@ -85,6 +87,7 @@ watch(
   (val) => {
     if (!isEmpty(val)) {
       state.data = val;
+      state.total = val.reduce((sum, item) => sum + item.value, 0); // 计算总和
     }
   },
   {
diff --git a/new-digital-agriculture-screen/src/views/land/components/warning.vue b/new-digital-agriculture-screen/src/views/land/components/warning.vue
new file mode 100644
index 0000000..e4d5a91
--- /dev/null
+++ b/new-digital-agriculture-screen/src/views/land/components/warning.vue
@@ -0,0 +1,118 @@
+<template>
+  <div style="display: flex; justify-content: space-around; width: 100%">
+    <section class="land_area_all">
+      <section v-for="(item, index) in data" :key="index" class="_left">
+        <section class="_circle">{{ item.value }}</section>
+        <section class="_text">{{ item.title }}</section>
+      </section>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+/* --------------- data --------------- */
+// #region
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
+  },
+});
+// #endregion
+
+/* --------------- methods --------------- */
+// #region
+
+// #endregion
+</script>
+
+<style lang="scss" scoped>
+.land_area_all {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  height: 100%;
+  width: 100%; /* 限制宽度 */
+  max-width: 400px; /* 可选最大值 */
+  ._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%;
+      font-weight: bold;
+      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: 18px;
+      text-shadow: 0 0 1px #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: rgba(38, 122, 102, 0.3);
+        border: 1px solid #35d0c0;
+        border-radius: 4px;
+        overflow: hidden;
+        .spot {
+          transform: scale(1.2);
+        }
+        ._label {
+          font-size: 16px;
+        }
+      }
+      ._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;
+      }
+    }
+  }
+  ._right::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>
diff --git a/new-digital-agriculture-screen/src/views/land/index.vue b/new-digital-agriculture-screen/src/views/land/index.vue
index 3b72863..98be3c9 100644
--- a/new-digital-agriculture-screen/src/views/land/index.vue
+++ b/new-digital-agriculture-screen/src/views/land/index.vue
@@ -2,46 +2,20 @@
   <el-row class="data-home-index">
     <el-col :span="6" class="left-charts">
       <div class="left-charts-item">
-        <customBack top-title="耕地面积统计" :top-postion="'left'">
+        <customBack top-title="基础地理信息" :top-postion="'left'">
+          <template #back>
+            <!--            <landTwo :data="state.data.two" />-->
+            <basic-info :data="state.data.basic"></basic-info>
+          </template>
+        </customBack>
+      </div>
+      <div class="left-charts-item">
+        <customBack top-title="土地分布数据" :top-postion="'left'">
           <template #back>
             <landOne :data="state.data.one" />
           </template>
         </customBack>
       </div>
-      <div class="left-charts-item">
-        <customBack top-title="农村土地资源" :top-postion="'left'">
-          <template #back>
-            <landTwo :data="state.data.two" />
-          </template>
-        </customBack>
-      </div>
-      <div class="left-charts-item">
-        <customBack
-          top-title="项目效益分析"
-          :top-postion="'left'"
-          :down-title="'全县'"
-          :label-field="'label'"
-          :value-field="'value'"
-          :down-width="'100px'"
-          :options="[
-            { label: '全县', value: '530926' },
-            { label: '耿马镇', value: '42611' },
-            { label: '勐撒镇', value: '9259' },
-            { label: '勐永镇', value: '17787' },
-            { label: '孟定镇', value: '42610' },
-            { label: '勐简乡', value: '17788' },
-            { label: '贺派乡', value: '40161' },
-            { label: '四排山乡', value: '40163' },
-            { label: '大兴乡', value: '40159' },
-          ]"
-          :is-down="true"
-          @command="handleCommand"
-        >
-          <template #back>
-            <landThere :data="state.data.there" :query="state.queryCode" />
-          </template>
-        </customBack>
-      </div>
     </el-col>
     <el-col :span="12">
       <landMap />
@@ -79,9 +53,10 @@
         </customBack>
       </div>
       <div class="right-charts-item">
-        <customBack top-title="全县作物情况" :top-postion="'right'">
+        <customBack top-title="土地违规使用风险预警" :top-postion="'right'">
           <template #back>
-            <landSix :data="state.data.six" />
+            <warning :data="state.data.warnings"></warning>
+            <!--            <landSix :data="state.data.six" />-->
           </template>
         </customBack>
       </div>
@@ -100,6 +75,8 @@ import landSix from './components/landSix.vue';
 import { useApp } from '@/hooks';
 import { sleep } from '@/utils';
 import { GetLandInfo } from '@/apis/land';
+import BasicInfo from './components/basicInfo.vue';
+import Warning from '@/views/land/components/warning.vue';
 
 const state = reactive({
   loading: false,
@@ -122,15 +99,15 @@ const loadData = async () => {
   await sleep(500);
   state.data = {
     one: [
-      { value: 20, name: '耿马镇' },
-      { value: 15, name: '勐撒镇' },
-      { value: 12, name: '勐永镇' },
-      { value: 16, name: '孟定镇' },
-      { value: 8, name: '勐简乡' },
-      { value: 12, name: '贺派乡' },
-      { value: 10, name: '四排山乡' },
-      { value: 9, name: '芒洪乡' },
-      { value: 8, name: '大兴乡' },
+      { value: 441.96, name: '耿马镇' },
+      { value: 515.11, name: '勐撒镇' },
+      { value: 399.6, name: '勐永镇' },
+      { value: 1069.15, name: '孟定镇' },
+      { value: 281.19, name: '勐简乡' },
+      { value: 251.74, name: '贺派乡' },
+      { value: 349.86, name: '四排山乡' },
+      { value: 314, name: '芒洪乡' },
+      { value: 456, name: '大兴乡' },
     ],
     two: [
       { name: '耿马镇', value: 87.84 },
@@ -200,6 +177,18 @@ const loadData = async () => {
         value: 32.1,
       },
     ],
+    basic: [
+      { value: '3837km²', title: '政区域面积' },
+      { value: '9个乡（镇）,3个农场', title: '下辖地区' },
+      { value: '27.88万人', title: '常住人口' },
+      { value: '18.8℃ - 19.2℃', title: '年均气温' },
+      { value: '946.2毫米（山区）', title: '年降水量' },
+      { value: '优越，适宜农业发展', title: '光热水土条件' },
+    ],
+    warnings: [
+      { value: 2, title: '当前风险预警数量' },
+      { value: 30, title: '已处理土地违规案件' },
+    ],
   };
   state.loading = false;
 };
@@ -240,7 +229,7 @@ const handleCommand = (data) => {
   }
   .left-charts-item {
     width: calc(100% - 5px);
-    height: calc((100% - 30px) / 3);
+    height: calc((100% - 30px) / 2);
   }
 
   .right-charts {