From 428d93f6fcf74a4d0e1068c169db0a26abcc9765 Mon Sep 17 00:00:00 2001
From: lzc <luo_zhaocong@163.com>
Date: Mon, 17 Mar 2025 17:34:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F=E5=9C=9F?=
 =?UTF-8?q?=E5=9C=B0=E8=B5=84=E6=BA=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-echart-line-line/index.vue         |  70 +++++++++
 .../custom-echart-pictorial-bar/index.vue     | 120 ++++++++++++++++
 main/src/components/index.js                  |   4 +
 sub-government-screen-service/components.d.ts |   2 +
 sub-government-screen-service/src/App.vue     |  14 +-
 .../src/components/baseBg.vue                 |  50 ++++++-
 .../src/components/centerMap.vue              |  27 ++++
 .../src/components/currentTime.vue            |  57 ++++++++
 .../views/home/components/entitiesCharts.vue  |   4 +-
 .../home/components/plantBreedCharts.vue      |   4 +-
 .../src/views/home/components/rolllist.vue    | 133 +++++++++---------
 .../src/views/home/index.vue                  | 100 ++++++++++---
 .../land/components/distributionCharts.vue    |  74 ++++++++++
 .../views/land/components/landCirculation.vue |  71 ++++++++++
 .../views/land/components/landareaCharts.vue  | 118 ++++++++++++++++
 .../views/land/components/landuseCharts.vue   |  74 ++++++++++
 .../src/views/land/index.vue                  |  43 ++++--
 17 files changed, 860 insertions(+), 105 deletions(-)
 create mode 100644 main/src/components/custom-echart-line-line/index.vue
 create mode 100644 main/src/components/custom-echart-pictorial-bar/index.vue
 create mode 100644 sub-government-screen-service/src/components/centerMap.vue
 create mode 100644 sub-government-screen-service/src/components/currentTime.vue
 create mode 100644 sub-government-screen-service/src/views/land/components/distributionCharts.vue
 create mode 100644 sub-government-screen-service/src/views/land/components/landCirculation.vue
 create mode 100644 sub-government-screen-service/src/views/land/components/landareaCharts.vue
 create mode 100644 sub-government-screen-service/src/views/land/components/landuseCharts.vue

diff --git a/main/src/components/custom-echart-line-line/index.vue b/main/src/components/custom-echart-line-line/index.vue
new file mode 100644
index 0000000..cf0ae9e
--- /dev/null
+++ b/main/src/components/custom-echart-line-line/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script>
+import { ref, reactive, watch, watchEffect } from 'vue';
+import { cloneDeep } from 'lodash';
+import { useEcharts } from '../../hooks/useEcharts';
+
+export default {
+  name: 'CustomEchartLineLine',
+  props: {
+    chartData: {
+      type: Array,
+      default: () => [],
+    },
+    size: {
+      type: Object,
+      default: () => {},
+    },
+    option: {
+      type: Object,
+      default: () => ({}),
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: 'calc(100vh - 78px)',
+    },
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    const chartRef = ref(null);
+    const { setOptions, getInstance, resize } = useEcharts(chartRef);
+    const optionVal = reactive({});
+
+    watchEffect(() => {
+      props.option && initCharts();
+    });
+
+    watch(
+      () => props.size,
+      () => {
+        resize();
+      },
+      {
+        immediate: true,
+      }
+    );
+
+    function initCharts() {
+      if (props.option) {
+        Object.assign(optionVal, cloneDeep(props.option));
+      }
+      setOptions(props.option);
+      resize();
+      getInstance()?.off('click', onClick);
+      getInstance()?.on('click', onClick);
+    }
+
+    function onClick(params) {
+      emit('click', params);
+    }
+
+    return { chartRef };
+  },
+};
+</script>
diff --git a/main/src/components/custom-echart-pictorial-bar/index.vue b/main/src/components/custom-echart-pictorial-bar/index.vue
new file mode 100644
index 0000000..9684467
--- /dev/null
+++ b/main/src/components/custom-echart-pictorial-bar/index.vue
@@ -0,0 +1,120 @@
+<template>
+  <div ref="chartRef" :style="{ height, width }"></div>
+</template>
+<script>
+import { ref, reactive, watch, watchEffect } from 'vue';
+import { cloneDeep } from 'lodash';
+import { useEcharts } from '../../hooks/useEcharts';
+
+export default {
+  name: 'customEchartPictorialBar',
+  props: {
+    chartData: {
+      type: Array,
+      default: () => [],
+    },
+    size: {
+      type: Object,
+      default: () => {},
+    },
+    option: {
+      type: Object,
+      default: () => ({}),
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: 'calc(100vh - 78px)',
+    },
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    const chartRef = ref(null);
+    const { setOptions, getInstance, resize } = useEcharts(chartRef);
+    const option = reactive({
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '6%',
+        top: '11%',
+        containLabel: true,
+      },
+      tooltip: {
+        formatter: '{b}',
+      },
+      series: [
+        {
+          type: 'pictorialBar',
+          barCategoryGap: '40%',
+          barWidth: '100%',
+          symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
+          data: [],
+          labelLine: { show: true },
+          z: 10,
+          itemStyle: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: '#000001', // 起始颜色
+                },
+                {
+                  offset: 1,
+                  color: '#0175b6', // 结束颜色
+                },
+              ],
+              global: false, // 默认为 false
+            },
+          },
+          label: {
+            show: false,
+            position: 'top',
+            formatter: '{c}',
+            color: 'white',
+            fontSize: 14,
+          },
+        },
+      ],
+    });
+
+    watchEffect(() => {
+      props.chartData && initCharts();
+    });
+
+    watch(
+      () => props.size,
+      () => {
+        resize();
+      },
+      {
+        immediate: true,
+      }
+    );
+
+    function initCharts() {
+      if (props.option) {
+        Object.assign(option, cloneDeep(props.option));
+      }
+      option.series[0].data = props.chartData;
+      setOptions(option);
+      resize();
+      getInstance()?.off('click', onClick);
+      getInstance()?.on('click', onClick);
+    }
+
+    function onClick(params) {
+      emit('click', params);
+    }
+
+    return { chartRef };
+  },
+};
+</script>
diff --git a/main/src/components/index.js b/main/src/components/index.js
index d973647..81b34ae 100644
--- a/main/src/components/index.js
+++ b/main/src/components/index.js
@@ -8,6 +8,8 @@ import CustomEchartPie from './custom-echart-pie';
 import CustomEchartLine from './custom-echart-line';
 import CustomEchartMixin from './custom-echart-mixin';
 import CustomEchartBarLine from './custom-echart-bar-line';
+import customEchartPictorialBar from './custom-echart-pictorial-bar';
+import CustomEchartLineLine from './custom-echart-line-line';
 
 export {
   SvgIcon,
@@ -20,4 +22,6 @@ export {
   CustomEchartLine,
   CustomEchartMixin,
   CustomEchartBarLine,
+  customEchartPictorialBar,
+  CustomEchartLineLine,
 };
diff --git a/sub-government-screen-service/components.d.ts b/sub-government-screen-service/components.d.ts
index 9acd056..3634602 100644
--- a/sub-government-screen-service/components.d.ts
+++ b/sub-government-screen-service/components.d.ts
@@ -8,7 +8,9 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BaseBg: typeof import('./src/components/baseBg.vue')['default']
+    CenterMap: typeof import('./src/components/centerMap.vue')['default']
     CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
+    CurrentTime: typeof import('./src/components/currentTime.vue')['default']
     CustomCard: typeof import('./src/components/CustomCard.vue')['default']
     CustomSelect: typeof import('./src/components/CustomSelect.vue')['default']
     GridSelect: typeof import('./src/components/GridSelect.vue')['default']
diff --git a/sub-government-screen-service/src/App.vue b/sub-government-screen-service/src/App.vue
index 7a2b418..c6e0e25 100644
--- a/sub-government-screen-service/src/App.vue
+++ b/sub-government-screen-service/src/App.vue
@@ -8,18 +8,30 @@
 <template>
   <el-config-provider :size="size" :locale="zhCn">
     <router-view />
+    <currentTime ref="apptime"></currentTime>
   </el-config-provider>
 </template>
 
 <script setup name="app">
-import { computed } from 'vue';
+import { computed, ref, onMounted, onUnmounted } from 'vue';
 import { useSettingStore } from '@/store/modules/setting';
 // 配置element中文
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
+import currentTime from '@/components/currentTime.vue';
 
 const SettingStore = useSettingStore();
 // 配置全局组件大小
 const size = computed(() => SettingStore.themeConfig.globalComSize);
+
+let apptime = ref(null);
+
+onMounted(() => {
+  apptime.value && apptime.value.startTime();
+});
+
+onUnmounted(() => {
+  apptime.value && apptime.value.chearTime();
+});
 </script>
 
 <style lang="scss">
diff --git a/sub-government-screen-service/src/components/baseBg.vue b/sub-government-screen-service/src/components/baseBg.vue
index 7b7cf6b..b3b2e17 100644
--- a/sub-government-screen-service/src/components/baseBg.vue
+++ b/sub-government-screen-service/src/components/baseBg.vue
@@ -1,7 +1,16 @@
 <template>
   <div class="data-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/screenbg.png') + ')' }">
     <div class="chart-content">
-      <div class="top">头部</div>
+      <div class="top">
+        <slot v-if="$slots.top" name="top"></slot>
+        <div v-else class="top-content-warp">
+          <div class="top-left"></div>
+          <div class="top-content">
+            {{ topTitle }}
+          </div>
+          <!-- <div class="top-right">{{ currentTime }}</div> -->
+        </div>
+      </div>
       <div class="content">
         <slot name="center"></slot>
       </div>
@@ -25,7 +34,7 @@
 </template>
 <script setup>
 import { isEmpty, getAssetsFile } from '@/utils';
-import { ref, reactive, onMounted, watch } from 'vue';
+import { ref, reactive, onMounted, watch, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useApp } from '@/hooks';
 const router = useRouter();
@@ -34,6 +43,10 @@ const props = defineProps({
     type: String,
     default: 'home',
   },
+  topTitle: {
+    type: String,
+    default: '系统',
+  },
 });
 
 const navlist = ref([
@@ -93,6 +106,35 @@ div {
     }
     .top {
       height: 55px;
+      .top-content-warp {
+        width: 100%;
+        .top-left,
+        .top-content,
+        .top-right {
+          display: inline-block;
+          vertical-align: middle;
+        }
+        .top-content {
+          width: calc(100% - 400px);
+          text-align: center;
+          font-size: 18px;
+          font-weight: bold;
+          transform: skewX(-8deg);
+          background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
+          -webkit-background-clip: text;
+          color: #fff;
+          letter-spacing: 8px;
+          text-shadow: -6px 0 0 1px #add8f1;
+        }
+        .top-left {
+          width: 200px;
+        }
+        .top-right {
+          text-align: right;
+          width: 200px;
+          color: #add8f1;
+        }
+      }
     }
     .bottom {
       height: 98px;
@@ -109,7 +151,7 @@ div {
             font-size: 16px;
             font-weight: bold;
             display: flex;
-            transform: skewX(-13deg);
+            transform: skewX(-8deg);
             background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
             -webkit-background-clip: text;
 
@@ -127,7 +169,7 @@ div {
       }
     }
     .content {
-      height: calc(100% - 153px);
+      height: calc(100% - 156px);
     }
   }
 }
diff --git a/sub-government-screen-service/src/components/centerMap.vue b/sub-government-screen-service/src/components/centerMap.vue
new file mode 100644
index 0000000..03964b5
--- /dev/null
+++ b/sub-government-screen-service/src/components/centerMap.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="map-center-warp">
+    <img :src="getAssetsFile('images/gmmap.png')" class="map-img" />
+  </div>
+</template>
+<script setup>
+import { isEmpty, getAssetsFile } from '@/utils';
+</script>
+<style lang="scss" scoped>
+.map-center-warp {
+  width: 100%;
+  text-align: center;
+  position: relative;
+  height: 100%;
+  .map-img {
+    width: 80%;
+    height: 80%;
+    position: absolute;
+    bottom: 50px;
+    left: 50%;
+    object-fit: contain;
+    transform: translateX(-50%);
+    max-width: 1000px;
+    max-height: 1000px;
+  }
+}
+</style>
diff --git a/sub-government-screen-service/src/components/currentTime.vue b/sub-government-screen-service/src/components/currentTime.vue
new file mode 100644
index 0000000..98bfce9
--- /dev/null
+++ b/sub-government-screen-service/src/components/currentTime.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="current-time-warp">{{ currentTime }}</div>
+</template>
+<script setup>
+import { ref, reactive, onMounted, watch, onUnmounted } from 'vue';
+let currentTime = ref('');
+
+const formatDateTime = () => {
+  const now = new Date();
+  // 获取各部分值
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0'); // JavaScript中月份从0开始，所以需要加1
+  const day = String(now.getDate()).padStart(2, '0');
+
+  // 星期几，注意返回的是0（周日）到6（周六）
+  const weekDay = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
+
+  const hour = String(now.getHours()).padStart(2, '0');
+  const minute = String(now.getMinutes()).padStart(2, '0');
+  const second = String(now.getSeconds()).padStart(2, '0');
+
+  // 格式化输出
+  const formattedDate = `${year}-${month}-${day}\u00A0\u00A0\u00A0 ${weekDay}\u00A0\u00A0\u00A0 ${hour}:${minute}:${second}`;
+
+  // console.log(formattedDate);
+  return formattedDate;
+};
+
+let interval = ref(null);
+
+const startTime = () => {
+  interval.value = setInterval(() => {
+    currentTime.value = formatDateTime();
+  }, 1000);
+};
+
+const chearTime = () => {
+  if (interval.value) {
+    interval.value = null;
+    clearInterval(interval.value);
+  }
+};
+
+defineExpose({
+  startTime,
+  chearTime,
+});
+</script>
+<style lang="scss" scoped>
+.current-time-warp {
+  position: fixed;
+  right: 16px;
+  top: 32px;
+  color: #add8f1;
+  z-index: 2;
+}
+</style>
diff --git a/sub-government-screen-service/src/views/home/components/entitiesCharts.vue b/sub-government-screen-service/src/views/home/components/entitiesCharts.vue
index f5e981c..eb4b979 100644
--- a/sub-government-screen-service/src/views/home/components/entitiesCharts.vue
+++ b/sub-government-screen-service/src/views/home/components/entitiesCharts.vue
@@ -33,14 +33,14 @@ const plantBreed = reactive({
     series: [
       {
         type: 'pie',
-        radius: [60, 80],
+        radius: [20, 80],
         roseType: 'area',
         center: ['40%', '50%'],
         label: {
           show: false,
         },
         itemStyle: {
-          borderRadius: 20,
+          borderRadius: 5,
         },
       },
     ],
diff --git a/sub-government-screen-service/src/views/home/components/plantBreedCharts.vue b/sub-government-screen-service/src/views/home/components/plantBreedCharts.vue
index bb6129a..1a4ae45 100644
--- a/sub-government-screen-service/src/views/home/components/plantBreedCharts.vue
+++ b/sub-government-screen-service/src/views/home/components/plantBreedCharts.vue
@@ -33,14 +33,14 @@ const plantBreed = ref({
     series: [
       {
         type: 'pie',
-        radius: [60, 80],
+        radius: [20, 80],
         roseType: 'area',
         center: ['40%', '50%'],
         label: {
           show: false,
         },
         itemStyle: {
-          borderRadius: 20,
+          borderRadius: 2,
         },
       },
     ],
diff --git a/sub-government-screen-service/src/views/home/components/rolllist.vue b/sub-government-screen-service/src/views/home/components/rolllist.vue
index c7b4bc2..7f8194f 100644
--- a/sub-government-screen-service/src/views/home/components/rolllist.vue
+++ b/sub-government-screen-service/src/views/home/components/rolllist.vue
@@ -1,29 +1,15 @@
 <template>
-  <!-- <div ref="scrollContainer" class="scroll-container" style="height: 90%"> -->
-  <!-- <div
-      ref="scrollContent"
-      class="scroll-content"
-      :style="{ transform: `translateY(${topPosition}px)`, transition: `transform ${transitionDuration}ms linear` }"
-    >
-      <div v-for="(item, index) in items" :key="index" class="list-item">
-        <div class="list-item-content">
-          <div class="list-item-l">{{ item }}</div>
-          <div class="list-item-r">
-            {{ '0' + (index + 1) }}
-          </div>
-        </div>
-      </div>
-    </div> -->
-  <div class="demo" style="height: 90%">
+  <div class="demo roll-list" style="height: 90%">
     <vue3ScrollSeamless class="scroll-wrap" :classOptions="classOptions" :dataList="list">
-      <!-- <ul class="ui-wrap">
-        <li class="li-item" v-for="(item, i) of list" :key="i">
-          <p>{{ item.title }}</p>
-        </li>
-      </ul> -->
       <div v-for="(item, index) in items" :key="index" class="list-item">
         <div class="list-item-content">
-          <div class="list-item-l">{{ item.title }}</div>
+          <div class="list-item-l">
+            <div class="item-top">
+              <span class="label"> {{ item.title || '--' }}</span>
+              <span class="value"> {{ item.value || '0' }}</span>
+            </div>
+            <el-progress :percentage="50" :show-text="false" :stroke-width="3" color="#6cd1f9" />
+          </div>
           <div class="list-item-r">
             {{ '0' + (index + 1) }}
           </div>
@@ -52,51 +38,72 @@ const classOptions = {
 </script>
 
 <style scoped lang="scss">
+.roll-list {
+  .scroll-wrap {
+    height: 80%;
+    width: 100%;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+
+  .list-item {
+    // border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
+    line-height: 36px;
+    .list-item-content {
+      display: inline-flex;
+      width: 100%;
+      justify-content: space-around;
+      position: relative;
+      .list-item-l,
+      .list-item-r {
+        color: #fff;
+      }
+      .list-item-l {
+        width: calc(100% - 0px);
+        .item-top {
+          width: 100%;
+          line-height: 16px;
+          .label,
+          .value {
+            display: inline-block;
+            width: 100%;
+          }
+          .label {
+            font-size: 12px;
+          }
+          .value {
+            font-size: 10px;
+            color: #6cd1f9;
+          }
+        }
+      }
+      .list-item-r {
+        text-align: right;
+        font-size: 20px;
+        font-weight: bold;
+        color: #6cd1f9;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+      }
+    }
+  }
+  .ui-wrap {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+  }
+  .li-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    text-align: center;
+  }
+}
 .demo {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 10px;
 }
-.scroll-wrap {
-  height: 200px;
-  width: 100%;
-  margin: 0 auto;
-  overflow: hidden;
-}
-
-.list-item {
-  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
-  line-height: 36px;
-  .list-item-content {
-    display: inline-flex;
-    width: 100%;
-    justify-content: space-around;
-    .list-item-l,
-    .list-item-r {
-      color: #fff;
-    }
-    .list-item-l {
-      width: calc(100% - 50px);
-      padding-right: 8px;
-    }
-    .list-item-r {
-      width: 50px;
-      text-align: right;
-      font-size: 20px;
-      font-weight: bold;
-    }
-  }
-}
-.ui-wrap {
-  list-style: none;
-  padding: 0;
-  margin: 0 auto;
-}
-.li-item {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  text-align: center;
-}
 </style>
diff --git a/sub-government-screen-service/src/views/home/index.vue b/sub-government-screen-service/src/views/home/index.vue
index 869f48d..8afad45 100644
--- a/sub-government-screen-service/src/views/home/index.vue
+++ b/sub-government-screen-service/src/views/home/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="data-home-index">
-    <baseBg :name-val="'home'">
+    <baseBg ref="homebase" :name-val="'home'">
+      <template #top> </template>
       <template #center>
         <el-row style="width: 100%; height: 100%">
           <el-col :span="6" class="left-charts">
@@ -17,21 +18,8 @@
               <plantBreedCharts></plantBreedCharts>
             </div>
           </el-col>
-          <el-col :span="12" style="text-align: center; position: relative">
-            <img
-              :src="getAssetsFile('images/gmmap.png')"
-              style="
-                width: 80%;
-                height: 80%;
-                position: absolute;
-                bottom: 50px;
-                left: 50%;
-                object-fit: cover;
-                transform: translateX(-50%);
-                max-width: 1000px;
-                max-height: 1000px;
-              "
-            />
+          <el-col :span="12">
+            <centerMap></centerMap>
           </el-col>
           <el-col :span="6" class="right-charts">
             <subTop title="使用投入品数据统计" :postion="'right'"></subTop>
@@ -50,11 +38,26 @@
         </el-row>
       </template>
     </baseBg>
+
+    <div class="home-index-top-warp">
+      <div class="home-index-top">
+        <h3 class="home-title">耿马县农产品销售情况</h3>
+        <div class="home-data-top">￥1284.624万</div>
+        <div class="home-data-contrast">
+          <span class="tips">同比去年</span>
+          <span class="value">￥4684.629</span>
+          <el-icon style="vertical-align: middle" class="contrast-icon" color="#6cd1f9">
+            <TopRight />
+          </el-icon>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script setup>
 import baseBg from '@/components/baseBg.vue';
 import subTop from '@/components/subTop.vue';
+import centerMap from '@/components/centerMap.vue';
 import comprehensive from './components/comprehensive.vue';
 import plantBreedCharts from './components/plantBreedCharts.vue';
 import entitiesCharts from './components/entitiesCharts.vue';
@@ -62,20 +65,71 @@ import inputs from './components/inputs.vue';
 import traceCharts from './components/traceCharts.vue';
 import rolllist from './components/rolllist.vue';
 import { isEmpty, getAssetsFile } from '@/utils';
-import { ref, reactive } from 'vue';
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
 
 let rollDataList = reactive([
-  { title: '数据 1' },
-  { title: '数据 2' },
-  { title: '数据 3' },
-  { title: '数据 4' },
-  { title: '数据 5' },
-  { title: '数据 6' },
+  { title: '勐腊镇', value: 533.1 },
+  { title: '孟定镇', value: 1069.2 },
+  { title: '孟永镇', value: 411.8 },
+  { title: '耿马镇', value: 429.4 },
+  { title: '大兴乡', value: 162.7 },
+  { title: '勐简乡', value: 2309.9 },
   // 更多项...
 ]);
+
+// const homebase = ref(null);
+
+// onMounted(() => {
+//   homebase.value && homebase.value.startTime();
+// });
+
+// onUnmounted(() => {
+//   homebase.value && homebase.value.chearTime();
+// });
 </script>
 <style lang="scss" scoped>
 .data-home-index {
+  .home-index-top-warp {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding-top: 24px;
+    text-align: center;
+    .home-index-top {
+      margin: auto;
+      .home-title {
+        display: inline-block;
+        font-size: 18px;
+        font-weight: bold;
+        transform: skewX(-10deg);
+        background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
+        -webkit-background-clip: text;
+        color: #fff;
+        letter-spacing: 4px;
+        text-shadow: -2px 0 0 1px #add8f1;
+      }
+      .home-data-top {
+        font-size: 18px;
+        font-weight: bold;
+        color: #fff;
+        letter-spacing: 8px;
+        margin: 12px 0;
+      }
+      .home-data-contrast {
+        .tips {
+          font-size: 10px;
+          color: #6cd1f9;
+        }
+        .value {
+          padding: 0 8px;
+          font-size: 12px;
+          font-weight: bold;
+          color: #fff;
+        }
+      }
+    }
+  }
   .left-charts {
     display: flex;
     justify-content: space-around;
diff --git a/sub-government-screen-service/src/views/land/components/distributionCharts.vue b/sub-government-screen-service/src/views/land/components/distributionCharts.vue
new file mode 100644
index 0000000..fe44eb9
--- /dev/null
+++ b/sub-government-screen-service/src/views/land/components/distributionCharts.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="distribution-charts">
+    <custom-echart-pie :chart-data="plantBreed.valData" height="100%" :option="plantBreed.option" />
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+
+const plantBreed = reactive({
+  option: {
+    color: ['#3685fe', '#41b879', '#ffd500'],
+    title: {
+      text: ' ',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    legend: {
+      data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
+      right: '0', // 距离左侧10%的位置
+      top: 'middle', // 垂直居中
+      orient: 'vertical', // 图例垂直排列
+      itemWidth: 15, // 图例标记的宽度
+      itemHeight: 8, // 图例标记的高度
+      textStyle: {
+        fontSize: 10, // 图例文字的字体大小
+        color: '#fff', // 图例文字的颜色
+      },
+    },
+    label: {
+      color: '#333',
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: [20, 80],
+        roseType: 'area',
+        center: ['40%', '50%'],
+        label: {
+          show: false,
+        },
+        itemStyle: {
+          borderRadius: 5,
+        },
+      },
+    ],
+  },
+  valData: [
+    { value: 205.6, name: '耿马镇' },
+    { value: 308.7, name: '勐撒镇' },
+    { value: 359.6, name: '勐永镇' },
+    { value: 452.6, name: '孟定镇' },
+    { value: 388.9, name: '勐简乡' },
+    { value: 508.7, name: '贺派乡' },
+    { value: 369.5, name: '四排山乡' },
+    { value: 610.8, name: '芒洪乡' },
+    { value: 754.3, name: '大兴乡' },
+  ],
+});
+
+onMounted(() => {
+  if (plantBreed.valData && plantBreed.length) {
+    plantBreed.valData.forEach((m, index) => {
+      let num = 100;
+      m.value = (Number(m.value) + Math.random() + num).toFixed(2);
+    });
+  }
+});
+</script>
+<style lang="scss" scoped>
+.distribution-charts {
+  height: 90%;
+}
+</style>
diff --git a/sub-government-screen-service/src/views/land/components/landCirculation.vue b/sub-government-screen-service/src/views/land/components/landCirculation.vue
new file mode 100644
index 0000000..834670e
--- /dev/null
+++ b/sub-government-screen-service/src/views/land/components/landCirculation.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="land-circulation-warp">
+    <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" :highlight-current-row="false">
+      <el-table-column prop="title" label="乡/镇" />
+      <el-table-column prop="demandArea" label="需求面积" />
+      <el-table-column prop="dealArea" label="成交面积" />
+      <el-table-column prop="maxPrice" label="最高价" />
+      <el-table-column prop="minPrice" label="最低价" />
+    </el-table>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+const tableData = ref([
+  { title: '耿马镇', demandArea: '103.1', dealArea: '84.2', maxPrice: '182.45', minPrice: '1489.5' },
+  { title: '勐撒镇', demandArea: '159.2', dealArea: '58.6', maxPrice: '1569', minPrice: '1387' },
+  { title: '孟定镇', demandArea: '188.3', dealArea: '102.6', maxPrice: '1468', minPrice: '1248' },
+  { title: '孟简镇', demandArea: '98.7', dealArea: '23.5', maxPrice: '1839', minPrice: '1536' },
+  { title: '孟永镇', demandArea: '165.5', dealArea: '123.5', maxPrice: '1883', minPrice: '1687' },
+]);
+const tableRowClassName = ({ row, rowIndex }) => {
+  if (rowIndex === 1) {
+    return 'warning-row';
+  } else if (rowIndex === 3) {
+    return 'success-row';
+  }
+  return '';
+};
+</script>
+<style lang="scss" scoped>
+.land-circulation-warp {
+  padding: 16px 0;
+  height: 90%;
+  .el-table .warning-row {
+    --el-table-tr-bg-color: var(--el-color-warning-light-9);
+  }
+  .el-table .success-row {
+    --el-table-tr-bg-color: var(--el-color-success-light-9);
+  }
+  ::v-deep() {
+    tbody tr {
+      background: transparent !important;
+      color: #fff !important;
+    }
+    tbody td {
+      border-bottom: none !important;
+    }
+    .el-table {
+      background: transparent !important;
+    }
+    .el-table__inner-wrapper::before {
+      display: none !important;
+    }
+    th {
+      background: #144482 !important;
+      color: #fff !important;
+      border-bottom: none !important;
+      font-size: 12px;
+    }
+
+    tr td {
+      padding: 5px 0 !important;
+      font-size: 12px;
+    }
+    .el-table--enable-row-hover .el-table__body tr:hover > td {
+      background-color: transparent !important; /* 设置你想要的 hover 颜色 */
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/sub-government-screen-service/src/views/land/components/landareaCharts.vue b/sub-government-screen-service/src/views/land/components/landareaCharts.vue
new file mode 100644
index 0000000..c4a1791
--- /dev/null
+++ b/sub-government-screen-service/src/views/land/components/landareaCharts.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="land-area-charts">
+    <custom-echart-line-line :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+
+const chartsData = reactive({
+  option: {
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+    // color: ['#3685fe', '#41b879', '#fed500'],
+    title: {
+      text: ' ',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    legend: {
+      right: '0', // 距离左侧10%的位置
+      top: '0', // 垂直居中
+      itemWidth: 15, // 图例标记的宽度
+      itemHeight: 8, // 图例标记的高度
+      textStyle: {
+        fontSize: 10, // 图例文字的字体大小
+        color: '#fff', // 图例文字的颜色
+      },
+      data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
+    },
+    xAxis: {
+      type: 'category',
+      name: ' ',
+      data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
+    },
+    yAxis: {
+      type: 'value',
+      name: '',
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#BAE7FF',
+          width: 1,
+          type: 'solid',
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(186, 231, 255, 0.2)',
+          type: 'dashed',
+        },
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: 'white',
+        },
+      },
+    },
+    series: [
+      {
+        name: '耿马镇',
+        type: 'line',
+        data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
+      },
+      {
+        name: '勐撒镇',
+        type: 'line',
+        data: [485, 182, 353, 265, 290, 354, 215, 200, 158],
+      },
+      {
+        name: '勐永镇',
+        type: 'line',
+        data: [120, 516, 238, 453, 368, 519, 432, 128, 578],
+      },
+      {
+        name: '孟定镇',
+        type: 'line',
+        data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
+      },
+      {
+        name: '勐简乡',
+        type: 'line',
+        data: [485, 182, 353, 265, 290, 354, 215, 200, 158],
+      },
+      {
+        name: '贺派乡',
+        type: 'line',
+        data: [386, 182, 191, 332, 290, 330, 690, 510, 563],
+      },
+      {
+        name: '四排山乡',
+        type: 'line',
+        data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
+      },
+      {
+        name: '芒洪乡',
+        type: 'line',
+        data: [543, 182, 191, 106, 290, 330, 310, 510, 762],
+      },
+      {
+        name: '大兴乡',
+        type: 'line',
+        data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
+      },
+    ],
+  },
+});
+</script>
+<style lang="scss" scoped>
+.land-area-charts {
+  height: 90%;
+}
+</style>
diff --git a/sub-government-screen-service/src/views/land/components/landuseCharts.vue b/sub-government-screen-service/src/views/land/components/landuseCharts.vue
new file mode 100644
index 0000000..c328e5d
--- /dev/null
+++ b/sub-government-screen-service/src/views/land/components/landuseCharts.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="land-use-charts">
+    <custom-echart-pictorial-bar :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+
+const chartsData = reactive({
+  option: {
+    color: ['#3685fe', '#41b879', '#ffd500'],
+    title: {
+      text: ' ',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    xAxis: {
+      type: 'category',
+      name: '  ',
+      //   data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: '#BAE7FF',
+          width: 1,
+          type: 'solid',
+        },
+      },
+    },
+    yAxis: {
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#BAE7FF',
+          width: 1,
+          type: 'solid',
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(186, 231, 255, 0.2)',
+          type: 'dashed',
+        },
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: 'white',
+        },
+      },
+    },
+  },
+  valData: [
+    { value: 205.6 },
+    { value: 308.7 },
+    { value: 359.6 },
+    { value: 452.6 },
+    { value: 388.9 },
+    { value: 508.7 },
+    { value: 369.5 },
+    { value: 610.8 },
+    { value: 754.3 },
+  ],
+});
+</script>
+<style lang="scss" scoped>
+.land-use-charts {
+  height: 90%;
+}
+</style>
diff --git a/sub-government-screen-service/src/views/land/index.vue b/sub-government-screen-service/src/views/land/index.vue
index 0e6caea..2b4d842 100644
--- a/sub-government-screen-service/src/views/land/index.vue
+++ b/sub-government-screen-service/src/views/land/index.vue
@@ -1,18 +1,36 @@
 <template>
   <div class="data-home-index">
-    <baseBg :name-val="'land'">
+    <baseBg :name-val="'land'" top-title="土地资源管理系统">
       <template #center>
         <el-row style="width: 100%; height: 100%">
           <el-col :span="6" class="left-charts">
-            <div class="left-charts-item"></div>
-            <div class="left-charts-item"></div>
-            <div class="left-charts-item"></div>
+            <div class="left-charts-item">
+              <subTop title="土地资源分布" :postion="'left'"></subTop>
+              <distributionCharts></distributionCharts>
+            </div>
+            <div class="left-charts-item">
+              <subTop title="土地流转信息" :postion="'left'"></subTop>
+              <landCirculation></landCirculation>
+            </div>
+            <div class="left-charts-item">
+              <subTop title="土地使用巡查案件" :postion="'left'"></subTop>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <centerMap></centerMap>
           </el-col>
-          <el-col :span="12"></el-col>
           <el-col :span="6" class="right-charts">
-            <!-- <div class="right-charts-item"></div>
-            <div class="right-charts-item"></div>
-            <div class="right-charts-item"></div> -->
+            <div class="right-charts-item">
+              <subTop title="农用地数据统计" :postion="'right'"></subTop>
+              <landuseCharts></landuseCharts>
+            </div>
+            <div class="right-charts-item">
+              <subTop title="年度农用地规划面积" :postion="'right'"></subTop>
+            </div>
+            <div class="right-charts-item">
+              <subTop title="各地农用地利用面积" :postion="'right'"></subTop>
+              <landareaCharts></landareaCharts>
+            </div>
           </el-col>
         </el-row>
       </template>
@@ -21,6 +39,13 @@
 </template>
 <script setup>
 import baseBg from '@/components/baseBg.vue';
+import subTop from '@/components/subTop.vue';
+import centerMap from '@/components/centerMap.vue';
+import distributionCharts from './components/distributionCharts.vue';
+import landuseCharts from './components/landuseCharts.vue';
+import landareaCharts from './components/landareaCharts.vue';
+import landCirculation from './components/landCirculation.vue';
+import { reactive } from 'vue';
 </script>
 <style lang="scss" scoped>
 .data-home-index {
@@ -34,7 +59,6 @@ import baseBg from '@/components/baseBg.vue';
   .left-charts-item {
     width: 100%;
     height: calc((100% - 30px) / 3);
-    background: #fff;
   }
 
   .right-charts {
@@ -47,7 +71,6 @@ import baseBg from '@/components/baseBg.vue';
   .right-charts-item {
     width: 100%;
     height: calc((100% - 30px) / 3);
-    background: #fff;
   }
 }
 </style>