From 3330fed4e9b17489d3693c83ac91321bac2080ad Mon Sep 17 00:00:00 2001
From: "2090205686@qq.com" <guoyongchao666>
Date: Mon, 12 May 2025 23:39:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E7=89=88=E5=A4=A7=E5=B1=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=EF=BC=8C=E9=A6=96=E9=A1=B5=E5=AE=8C=EF=BC=8C=E4=BA=A7?=
 =?UTF-8?q?=E5=87=BA=E5=93=81=E7=AE=A1=E7=90=86=E6=9C=AA=E5=AE=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/subTop.vue                     |  6 +-
 .../components/entitiesCategoryCharts.vue     | 89 +++++++++++------
 .../components/entitiesStatistics.vue         |  1 +
 src/views/entities/index.vue                  | 96 ++++++++++++++++++-
 src/views/home/index.vue                      | 43 ++++++---
 5 files changed, 187 insertions(+), 48 deletions(-)

diff --git a/src/components/subTop.vue b/src/components/subTop.vue
index 220914f..83c87c4 100644
--- a/src/components/subTop.vue
+++ b/src/components/subTop.vue
@@ -9,7 +9,7 @@
     ></div>
     <span class="title-top-content" :style="{ 'text-align': props.left }">{{ topTitle || '--' }}</span>
     <div v-if="isDown" class="down-list" :style="{ width: downWidth }">
-      <el-dropdown :hide-on-click="true" :style="{ width: '90%' }" trigger="click" @command="handleCommand">
+      <el-dropdown :hide-on-click="true" trigger="click" @command="handleCommand">
         <span class="el-dropdown-link">
           {{ currentVal && currentVal[labelField] ? currentVal[labelField] : downTitle }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
         </span>
@@ -167,7 +167,7 @@ const handleCommand = (data) => {
   .down-list {
     display: inline-block;
     position: absolute;
-    right: 32px;
+    right: 0;
     top: 50%;
     transform: translateY(-50%);
     z-index: 2;
@@ -178,6 +178,8 @@ const handleCommand = (data) => {
       border: 1px solid $color-custom-main;
       padding: 6px;
       border-radius: 4px;
+      padding-left: 10px;
+      padding-right: 10px;
     }
   }
 }
diff --git a/src/views/entities/components/entitiesCategoryCharts.vue b/src/views/entities/components/entitiesCategoryCharts.vue
index b5150b8..500b686 100644
--- a/src/views/entities/components/entitiesCategoryCharts.vue
+++ b/src/views/entities/components/entitiesCategoryCharts.vue
@@ -1,34 +1,21 @@
 <template>
-  <custom-echart-line :chart-data="dataList" height="100%" :option="state.option" />
+  <custom-echart-line :chart-data="state.data" height="100%" :option="state.option" />
 </template>
 <script setup>
-import { reactive } from 'vue';
-let dataList = reactive([
-  {
-    value: 10,
-    name: '2020',
+import { reactive, watch } from 'vue';
+import { isEmpty, sleep } from '@/utils';
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => [],
   },
-  {
-    value: 66,
-    name: '2021',
+  query: {
+    type: String,
+    default: '',
   },
-  {
-    value: 100,
-    name: '2022',
-  },
-  {
-    value: 120,
-    name: '2023',
-  },
-  {
-    value: 150,
-    name: '2024',
-  },
-  {
-    value: 80,
-    name: '2025',
-  },
-]);
+});
+
 const state = reactive({
   option: {
     color: ['#35D0C0'],
@@ -76,12 +63,12 @@ const state = reactive({
       // name: '',
     },
   },
-  data: dataList,
+  data: [],
 });
 
 const refresData = () => {
   console.info('landPatrol********************refresData');
-  state.data = dataList = reactive([
+  state.data = reactive([
     {
       value: 20,
       name: '2020',
@@ -108,7 +95,53 @@ const refresData = () => {
     },
   ]);
 };
+const loadData = async (code = '') => {
+  state.loading = true;
+  // GetInputsInfo()
+  //   .then((res) => {
+  //     if (res.code === 200) {
+  //       state.data = res.data;
+  //     }
+  //   })
+  //   .catch((err) => {
+  //     app.$message.error(err.msg);
+  //   });
+  await sleep(500);
+  state.data = [
+    { value: 5, name: '2020' },
+    { value: 36, name: '2021' },
+    { value: 70, name: '2022' },
+    { value: 56, name: '2023' },
+    { value: 70, name: '2024' },
+    { value: 20, name: '2025' },
+  ];
+};
 
+watch(
+  () => props.data,
+  (val) => {
+    if (!isEmpty(val)) {
+      state.data = val;
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
+watch(
+  () => props.query,
+  (val) => {
+    if (!isEmpty(val)) {
+      loadData(val);
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
 defineExpose({
   refresData,
 });
diff --git a/src/views/entities/components/entitiesStatistics.vue b/src/views/entities/components/entitiesStatistics.vue
index 4b5f8d4..4af9de3 100644
--- a/src/views/entities/components/entitiesStatistics.vue
+++ b/src/views/entities/components/entitiesStatistics.vue
@@ -26,6 +26,7 @@ const state = reactive({
       containLabel: true,
     },
     tooltip: {
+      show: true,
       trigger: 'axis',
       axisPointer: {
         type: 'shadow',
diff --git a/src/views/entities/index.vue b/src/views/entities/index.vue
index 85a42e3..d937e59 100644
--- a/src/views/entities/index.vue
+++ b/src/views/entities/index.vue
@@ -2,9 +2,29 @@
   <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'"
+          :down-title="'全县'"
+          :label-field="'label'"
+          :value-field="'value'"
+          :down-width="''"
+          :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>
-            <entitiesCategoryCharts></entitiesCategoryCharts>
+            <entitiesCategoryCharts ref="oneRef" :data="state.data.one" :query="state.queryCode"></entitiesCategoryCharts>
           </template>
         </customBack>
       </div>
@@ -16,9 +36,25 @@
         </customBack>
       </div>
       <div class="left-charts-item">
-        <customBack top-title="全县作物产量对比" :top-postion="'left'">
+        <customBack
+          top-title="全县作物产量对比"
+          :top-postion="'left'"
+          :down-title="'烟草'"
+          :label-field="'label'"
+          :value-field="'value'"
+          :down-width="''"
+          :options="[
+            { label: '烟草', value: 1 },
+            { label: '甘蔗', value: 2 },
+            { label: '核桃', value: 3 },
+            { label: '蔬菜', value: 4 },
+            { label: '其他', value: 5 },
+          ]"
+          :is-down="true"
+          @command="handleContrast"
+        >
           <template #back>
-            <entitiesStatistics></entitiesStatistics>
+            <entitiesStatistics ref="thirdRef" :data="state.data.third" :query="state.contrastCode"></entitiesStatistics>
           </template>
         </customBack>
       </div>
@@ -52,6 +88,7 @@
   </el-row>
 </template>
 <script setup>
+import { nextTick, reactive, ref } from 'vue';
 import centerMap from '@/components/centerMap.vue';
 import categoryCharts from './components/categoryCharts.vue';
 import entitieslist from './components/entitieslist.vue';
@@ -60,6 +97,57 @@ import benefitCharts from './components/benefitCharts.vue';
 import entitiesStatistics from './components/entitiesStatistics.vue';
 import entitiesCategoryCharts from './components/entitiesCategoryCharts.vue';
 import entitiesMap from './components/entitiesMap.vue';
+import { sleep } from '@/utils';
+
+const oneRef = ref(null);
+
+const state = reactive({
+  loading: false,
+  data: {},
+  queryCode: '',
+  contrastCode: '',
+});
+const loadData = async () => {
+  state.loading = true;
+  await sleep(500);
+  state.data = {
+    one: [
+      { value: 5, name: '2020' },
+      { value: 36, name: '2021' },
+      { value: 70, name: '2022' },
+      { value: 56, name: '2023' },
+      { value: 70, name: '2024' },
+      { value: 20, name: '2025' },
+    ],
+    third: [
+      { value: 78, value1: 128, name: '耿马镇' },
+      { value: 55, value1: 117, name: '勐撒镇' },
+      { value: 65, value1: 145, name: '勐永镇' },
+      { value: 60, value1: 126, name: '孟定镇' },
+      { value: 40, value1: 86, name: '勐简乡' },
+      { value: 81, value1: 152, name: '贺派乡' },
+      { value: 41, value1: 130, name: '四排山乡' },
+      { value: 63, value1: 109, name: '芒洪乡' },
+      { value: 79, value1: 184, name: '大兴乡' },
+    ],
+  };
+};
+loadData();
+
+const handleCommand = (data) => {
+  state.queryCode = data.value;
+  // console.info('data=', data);
+  // nextTick(() => {
+  //   oneRef.value && oneRef.value.refresData();
+  // });
+};
+const handleContrast = (data) => {
+  state.contrastCode = data.value;
+  // console.info('data=', data);
+  // nextTick(() => {
+  //   thirdRef.value && thirdRef.value.refresData();
+  // });
+};
 </script>
 <style lang="scss" scoped>
 .data-home-index {
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 92d4e3b..d9d7905 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -2,8 +2,8 @@
   <div class="data-home-index">
     <template v-for="(n, index) in homeList" :key="n.name">
       <div class="home-enter-item" :style="n.style" @click="itemClick(index)">
-        <div class="name">
-          <span>{{ n.title || '--' }}</span>
+        <div class="name" :style="n.nameStyle">
+          <span :style="n.spanStyle">{{ n.title || '--' }}</span>
         </div>
         <div class="img-icon" :style="n.imgstyle"><img :src="getAssetsFile(n.img)" /></div>
       </div>
@@ -32,17 +32,21 @@ let homeList = reactive([
     linkType: 0,
     url: '',
     img: 'images/vsualized/home1.png',
-    style: 'left: 20%;bottom:320px;',
+    style: 'left: 21%;bottom:300px;',
     imgstyle: 'width:100px;height:100px',
+    nameStyle: 'padding: 0 16px;margin: 16px 0;',
+    spanStyle: 'font-size: 20px;',
   },
   {
-    title: '农业产业运营服务平台',
+    title: '产业运营平台',
     name: 'operation',
     linkType: 0,
     url: '',
     img: 'images/vsualized/home2.png',
-    style: 'left: 20%;bottom: 64px;',
+    style: 'left: 22%;bottom: 24px;',
     imgstyle: 'width:160px;height:160px',
+    nameStyle: 'padding: 0 22px;margin: 24px 0;border-radius: 16px;',
+    spanStyle: 'font-size: 28px;line-height: 66px',
   },
   {
     title: '数字大屏',
@@ -50,17 +54,21 @@ let homeList = reactive([
     linkType: 1,
     url: '/v2/land',
     img: 'images/vsualized/home3.png',
-    style: 'right: 20%;bottom:320px;',
+    style: 'right: 23%;bottom:300px;',
     imgstyle: 'width:100px;height:100px',
+    nameStyle: 'padding: 0 16px;margin: 16px 0;',
+    spanStyle: 'font-size: 20px;',
   },
   {
-    title: '农业产业政务服务平台',
+    title: '政务云平台',
     name: 'gov',
     linkType: 0,
     url: '',
     img: 'images/vsualized/home4.png',
-    style: 'right: 20%;bottom: 64px;',
+    style: 'right: 24%;bottom: 24px;',
     imgstyle: 'width:160px;height:160px',
+    nameStyle: 'padding: 0 22px;margin: 24px 0;border-radius: 16px;',
+    spanStyle: 'font-size: 28px;line-height: 66px',
   },
   // 更多项...
 ]);
@@ -106,17 +114,24 @@ const itemClick = (index) => {
     .name {
       color: #fff;
       font-family: 'JinBuTi';
-      margin: 24px 0;
-      background: linear-gradient(180deg, #01fefd, rgba(1, 254, 253, 0));
       border: 2px solid #01fefd;
       border-radius: 8px;
-
-      padding: 0 24px;
+      backdrop-filter: blur(8px);
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(180deg, #01fefd, rgba(1, 254, 253, 0));
+        opacity: 0.16; // 仅背景透明
+        z-index: -1; // 将背景置于底层
+        border-radius: 6px; // 比主元素小，避免覆盖边框
+      }
       span {
-        backdrop-filter: blur(8px);
         line-height: 40px;
         text-shadow: 0px 4px 8px 0px #01fefd;
-        font-size: 28px;
       }
     }
     .img-icon {