diff --git a/main/src/components/custom-echart-bar/index.vue b/main/src/components/custom-echart-bar/index.vue
index 8592346..9c8f82a 100644
--- a/main/src/components/custom-echart-bar/index.vue
+++ b/main/src/components/custom-echart-bar/index.vue
@@ -29,6 +29,10 @@ export default {
       type: String,
       default: 'calc(100vh - 78px)',
     },
+    isSeries: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['click'],
   setup(props, { emit }) {
@@ -90,7 +94,7 @@ export default {
         }
         seriesData.push(obj);
       });
-      option.series = seriesData;
+      option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
       option.xAxis.data = xAxisData;
       setOptions(option);
       getInstance()?.off('click', onClick);
diff --git a/main/src/components/custom-echart-bubble/index.vue b/main/src/components/custom-echart-bubble/index.vue
new file mode 100644
index 0000000..3a96834
--- /dev/null
+++ b/main/src/components/custom-echart-bubble/index.vue
@@ -0,0 +1,103 @@
+<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: 'customEchartBubble',
+  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({
+      tooltip: {
+        formatter: function (params) {
+          console.log(params);
+          var str = params.marker + '' + params.data.name + '</br>' + '交易额：' + params.data.value + '万元</br>';
+          return str;
+        },
+      },
+      animationDurationUpdate: function (idx) {
+        // 越往后的数据延迟越大
+        return idx * 100;
+      },
+      animationEasingUpdate: 'bounceIn',
+      color: ['#fff', '#fff', '#fff'],
+      series: [
+        {
+          type: 'graph',
+          layout: 'force',
+          force: {
+            repulsion: 80,
+            edgeLength: 20,
+          },
+          roam: true,
+          label: {
+            normal: {
+              show: true,
+            },
+          },
+          data: props.chartData,
+        },
+      ],
+    });
+
+    watchEffect(() => {
+      props.chartData && initCharts();
+    });
+
+    watch(
+      () => props.size,
+      () => {
+        console.info(' option.series[0]', props.chartData);
+        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/custom-echart-mixin/index.vue b/main/src/components/custom-echart-mixin/index.vue
index 1d00039..3660351 100644
--- a/main/src/components/custom-echart-mixin/index.vue
+++ b/main/src/components/custom-echart-mixin/index.vue
@@ -53,6 +53,9 @@ export default {
           name: 'bar',
           type: 'bar',
           data: [],
+          itemStyle: {
+            barWidth: 10,
+          },
         },
       ],
     });
@@ -69,10 +72,13 @@ export default {
       let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
       let seriesData = [];
       typeArr.forEach((type, index) => {
-        let obj = { name: type };
+        const barStyle = props.option?.barStyle ?? {};
+        let obj = { name: type, ...barStyle };
         let chartArr = props.chartData.filter((item) => type === item.type);
         obj['data'] = chartArr.map((item) => item.value);
         obj['type'] = chartArr[0].seriesType;
+        obj['stack'] = chartArr[0].stack;
+        obj['itemStyle'] = chartArr[0].itemStyle;
         seriesData.push(obj);
       });
       option.series = seriesData;
diff --git a/main/src/components/custom-echart-pie-3d/index.vue b/main/src/components/custom-echart-pie-3d/index.vue
new file mode 100644
index 0000000..08b5f3f
--- /dev/null
+++ b/main/src/components/custom-echart-pie-3d/index.vue
@@ -0,0 +1,90 @@
+<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: 'CustomEchartPie3d',
+  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({
+      tooltip: {
+        formatter: '{b} ({c})',
+      },
+      series: [
+        {
+          type: 'pie',
+          radius: '72%',
+          center: ['50%', '55%'],
+          data: [],
+          labelLine: { show: true },
+          label: {
+            show: true,
+            formatter: '{b} \n ({d}%)',
+            color: '#B1B9D3',
+          },
+        },
+      ],
+    });
+
+    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;
+      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 1d73a28..9f5408d 100644
--- a/main/src/components/index.js
+++ b/main/src/components/index.js
@@ -11,6 +11,8 @@ 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';
+import CustomEchartBubble from './custom-echart-bubble';
+import CustomEchartPie3d from './custom-echart-pie-3d';
 
 export {
   SvgIcon,
@@ -26,4 +28,6 @@ export {
   CustomEchartBarLine,
   customEchartPictorialBar,
   CustomEchartLineLine,
+  CustomEchartBubble,
+  CustomEchartPie3d,
 };
diff --git a/main/src/utils/echarts.js b/main/src/utils/echarts.js
index 72ceb57..7806107 100644
--- a/main/src/utils/echarts.js
+++ b/main/src/utils/echarts.js
@@ -1,6 +1,6 @@
 import * as echarts from 'echarts/core';
 
-import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart, RadarChart } from 'echarts/charts';
+import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart, RadarChart, GraphChart } from 'echarts/charts';
 
 import {
   TitleComponent,
@@ -43,6 +43,7 @@ echarts.use([
   TimelineComponent,
   CalendarComponent,
   GraphicComponent,
+  GraphChart,
 ]);
 
 export default echarts;
diff --git a/sub-government-screen-service/components.d.ts b/sub-government-screen-service/components.d.ts
index 3634602..e6bffc0 100644
--- a/sub-government-screen-service/components.d.ts
+++ b/sub-government-screen-service/components.d.ts
@@ -11,6 +11,7 @@ declare module 'vue' {
     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']
+    CustomBack: typeof import('./src/components/customBack.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 c6e0e25..acc815e 100644
--- a/sub-government-screen-service/src/App.vue
+++ b/sub-government-screen-service/src/App.vue
@@ -25,13 +25,13 @@ const size = computed(() => SettingStore.themeConfig.globalComSize);
 
 let apptime = ref(null);
 
-onMounted(() => {
-  apptime.value && apptime.value.startTime();
-});
+// onMounted(() => {
+//   apptime.value && apptime.value.startTime();
+// });
 
-onUnmounted(() => {
-  apptime.value && apptime.value.chearTime();
-});
+// onUnmounted(() => {
+//   apptime.value && apptime.value.chearTime();
+// });
 </script>
 
 <style lang="scss">
diff --git a/sub-government-screen-service/src/assets/images/bottombj.jpg b/sub-government-screen-service/src/assets/images/vsualized/bottombj.jpg
similarity index 100%
rename from sub-government-screen-service/src/assets/images/bottombj.jpg
rename to sub-government-screen-service/src/assets/images/vsualized/bottombj.jpg
diff --git a/sub-government-screen-service/src/assets/images/gmmap.png b/sub-government-screen-service/src/assets/images/vsualized/gmmap.png
similarity index 100%
rename from sub-government-screen-service/src/assets/images/gmmap.png
rename to sub-government-screen-service/src/assets/images/vsualized/gmmap.png
diff --git a/sub-government-screen-service/src/assets/images/vsualized/home/Increase.png b/sub-government-screen-service/src/assets/images/vsualized/home/Increase.png
new file mode 100644
index 0000000..7a17494
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/home/Increase.png differ
diff --git a/sub-government-screen-service/src/assets/images/vsualized/home/animalm.png b/sub-government-screen-service/src/assets/images/vsualized/home/animalm.png
new file mode 100644
index 0000000..74e9d01
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/home/animalm.png differ
diff --git a/sub-government-screen-service/src/assets/images/vsualized/home/area.png b/sub-government-screen-service/src/assets/images/vsualized/home/area.png
new file mode 100644
index 0000000..746a6f0
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/home/area.png differ
diff --git a/sub-government-screen-service/src/assets/images/vsualized/home/farmers.png b/sub-government-screen-service/src/assets/images/vsualized/home/farmers.png
new file mode 100644
index 0000000..fd63234
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/home/farmers.png differ
diff --git a/sub-government-screen-service/src/assets/images/vsualized/home/farmuse.png b/sub-government-screen-service/src/assets/images/vsualized/home/farmuse.png
new file mode 100644
index 0000000..132448f
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/home/farmuse.png differ
diff --git a/sub-government-screen-service/src/assets/images/vsualized/home/feeduse.png b/sub-government-screen-service/src/assets/images/vsualized/home/feeduse.png
new file mode 100644
index 0000000..c3528ca
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/home/feeduse.png differ
diff --git a/sub-government-screen-service/src/assets/images/vsualized/home/fertilizer.png b/sub-government-screen-service/src/assets/images/vsualized/home/fertilizer.png
new file mode 100644
index 0000000..3189002
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/home/fertilizer.png differ
diff --git a/sub-government-screen-service/src/assets/images/vsualized/home/hometopbg.png b/sub-government-screen-service/src/assets/images/vsualized/home/hometopbg.png
new file mode 100644
index 0000000..53598aa
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/home/hometopbg.png differ
diff --git a/sub-government-screen-service/src/assets/images/vsualized/home/nav-on.png b/sub-government-screen-service/src/assets/images/vsualized/home/nav-on.png
new file mode 100644
index 0000000..45ad086
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/home/nav-on.png differ
diff --git a/sub-government-screen-service/src/assets/images/vsualized/home/nav.png b/sub-government-screen-service/src/assets/images/vsualized/home/nav.png
new file mode 100644
index 0000000..0d12596
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/home/nav.png differ
diff --git a/sub-government-screen-service/src/assets/images/vsualized/home/outputVal.png b/sub-government-screen-service/src/assets/images/vsualized/home/outputVal.png
new file mode 100644
index 0000000..f706335
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/home/outputVal.png differ
diff --git a/sub-government-screen-service/src/assets/images/vsualized/home/partbg.png b/sub-government-screen-service/src/assets/images/vsualized/home/partbg.png
new file mode 100644
index 0000000..7544be7
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/home/partbg.png differ
diff --git a/sub-government-screen-service/src/assets/images/vsualized/home/partbg1.png b/sub-government-screen-service/src/assets/images/vsualized/home/partbg1.png
new file mode 100644
index 0000000..247376c
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/home/partbg1.png differ
diff --git a/sub-government-screen-service/src/assets/images/vsualized/home/partbg2.png b/sub-government-screen-service/src/assets/images/vsualized/home/partbg2.png
new file mode 100644
index 0000000..f41c95b
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/home/partbg2.png differ
diff --git a/sub-government-screen-service/src/assets/images/vsualized/home/partbg3.png b/sub-government-screen-service/src/assets/images/vsualized/home/partbg3.png
new file mode 100644
index 0000000..e8373e0
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/home/partbg3.png differ
diff --git a/sub-government-screen-service/src/assets/images/vsualized/home/pesticide.png b/sub-government-screen-service/src/assets/images/vsualized/home/pesticide.png
new file mode 100644
index 0000000..7b4c9b5
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/home/pesticide.png differ
diff --git a/sub-government-screen-service/src/assets/images/vsualized/home/provenance.png b/sub-government-screen-service/src/assets/images/vsualized/home/provenance.png
new file mode 100644
index 0000000..a21c52b
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/home/provenance.png differ
diff --git a/sub-government-screen-service/src/assets/images/vsualized/home/titlebg.png b/sub-government-screen-service/src/assets/images/vsualized/home/titlebg.png
new file mode 100644
index 0000000..76f4327
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/home/titlebg.png differ
diff --git a/sub-government-screen-service/src/assets/images/vsualized/hraderbg.png b/sub-government-screen-service/src/assets/images/vsualized/hraderbg.png
new file mode 100644
index 0000000..1134831
Binary files /dev/null and b/sub-government-screen-service/src/assets/images/vsualized/hraderbg.png differ
diff --git a/sub-government-screen-service/src/assets/images/screenbg.png b/sub-government-screen-service/src/assets/images/vsualized/screenbg.png
similarity index 100%
rename from sub-government-screen-service/src/assets/images/screenbg.png
rename to sub-government-screen-service/src/assets/images/vsualized/screenbg.png
diff --git a/sub-government-screen-service/src/components/baseBg.vue b/sub-government-screen-service/src/components/baseBg.vue
index b3b2e17..bad9c6e 100644
--- a/sub-government-screen-service/src/components/baseBg.vue
+++ b/sub-government-screen-service/src/components/baseBg.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="data-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/screenbg.png') + ')' }">
+  <div class="data-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/screenbg.png') + ')' }">
     <div class="chart-content">
       <div class="top">
         <slot v-if="$slots.top" name="top"></slot>
-        <div v-else class="top-content-warp">
+        <div v-else class="top-content-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/hraderbg.png') + ')' }">
           <div class="top-left"></div>
           <div class="top-content">
             {{ topTitle }}
@@ -14,12 +14,18 @@
       <div class="content">
         <slot name="center"></slot>
       </div>
-      <div class="bottom" :style="{ 'background-image': 'url(' + getAssetsFile('images/bottombj.jpg') + ')' }">
+      <div class="bottom" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/bottombg.jpg') + ')' }">
         <div class="b-nav">
           <div
             v-for="n in navlist"
             :key="n.name"
             class="b-nav-item"
+            :style="{
+              'background-image':
+                'url(' +
+                (currentName == n.name ? getAssetsFile('images/vsualized/home/nav-on.png') : getAssetsFile('images/vsualized/home/nav.png')) +
+                ')',
+            }"
             :class="currentName == n.name ? 'nav-act' : 'nav-normal'"
             @click="itemAct(n.name)"
           >
@@ -108,6 +114,9 @@ div {
       height: 55px;
       .top-content-warp {
         width: 100%;
+        height: 100%;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
         .top-left,
         .top-content,
         .top-right {
@@ -116,6 +125,7 @@ div {
         }
         .top-content {
           width: calc(100% - 400px);
+          line-height: 42px;
           text-align: center;
           font-size: 18px;
           font-weight: bold;
@@ -147,10 +157,14 @@ div {
         .b-nav-item {
           display: inline-block;
           cursor: pointer;
+          min-width: 132px;
+          height: 42px;
+          text-align: center;
+          line-height: 38px;
           span {
-            font-size: 16px;
+            font-size: 14px;
             font-weight: bold;
-            display: flex;
+            display: inline-flex;
             transform: skewX(-8deg);
             background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
             -webkit-background-clip: text;
diff --git a/sub-government-screen-service/src/components/centerMap.vue b/sub-government-screen-service/src/components/centerMap.vue
index 03964b5..d4cef02 100644
--- a/sub-government-screen-service/src/components/centerMap.vue
+++ b/sub-government-screen-service/src/components/centerMap.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="map-center-warp">
-    <img :src="getAssetsFile('images/gmmap.png')" class="map-img" />
+    <img :src="getAssetsFile('images/vsualized/gmmap.png')" class="map-img" />
   </div>
 </template>
 <script setup>
diff --git a/sub-government-screen-service/src/components/customBack.vue b/sub-government-screen-service/src/components/customBack.vue
new file mode 100644
index 0000000..291494c
--- /dev/null
+++ b/sub-government-screen-service/src/components/customBack.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="custom-back-warp">
+    <subTop :title="topTitle" :postion="topPostion"></subTop>
+    <div class="custom-back-content">
+      <slot name="back"></slot>
+    </div>
+  </div>
+</template>
+<script setup>
+import subTop from '@/components/subTop.vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+import { ref, reactive, onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useApp } from '@/hooks';
+
+const router = useRouter();
+const props = defineProps({
+  topTitle: {
+    type: String,
+    default: '统计',
+  },
+  topPostion: {
+    type: String,
+    default: 'left',
+  },
+});
+</script>
+<style lang="scss" scoped>
+.custom-back-warp {
+  height: 100%;
+  width: 100%;
+  .custom-back-content {
+    height: calc(100% - 38px);
+    width: 100%;
+    padding: 10px 0;
+    box-sizing: border-box;
+  }
+}
+</style>
diff --git a/sub-government-screen-service/src/components/subTop.vue b/sub-government-screen-service/src/components/subTop.vue
index 263bd72..d6b236d 100644
--- a/sub-government-screen-service/src/components/subTop.vue
+++ b/sub-government-screen-service/src/components/subTop.vue
@@ -1,5 +1,14 @@
 <template>
-  <div :style="{ 'text-align': pos }" class="title-top-warp">{{ topTitle || '--' }}</div>
+  <div class="title-top-warp">
+    <div
+      :style="{
+        'background-image': 'url(' + getAssetsFile('images/vsualized/home/titlebg.png') + ')',
+        transform: pos == 'right' ? 'rotateY(180deg)' : '',
+      }"
+      class="title-top-bg"
+    ></div>
+    <span class="title-top-content" :style="{ 'text-align': pos }">{{ topTitle || '--' }}</span>
+  </div>
 </template>
 <script setup>
 import { isEmpty, getAssetsFile } from '@/utils';
@@ -36,15 +45,37 @@ watch(
 </script>
 <style lang="scss" scoped>
 .title-top-warp {
-  font-size: 14px;
-  font-weight: bold;
-  display: inline-block;
-  transform: skewX(-13deg);
-  background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
-  -webkit-background-clip: text;
-  color: #fff;
-  letter-spacing: 4px;
-  text-shadow: -2px 0 0 1px #add8f1;
+  position: relative;
+  height: 38px;
   width: 100%;
+  .title-top-bg {
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 1;
+  }
+  .title-top-content {
+    line-height: 38px;
+    font-size: 14px;
+    font-weight: bold;
+    display: inline-block;
+    transform: skewX(-13deg);
+    background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
+    -webkit-background-clip: text;
+    color: #fff;
+    letter-spacing: 4px;
+    text-shadow: -2px 0 0 1px #add8f1;
+    width: 100%;
+    padding: 0 36px;
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
+  }
 }
 </style>
diff --git a/sub-government-screen-service/src/views/breed/index.vue b/sub-government-screen-service/src/views/breed/index.vue
index 33cc2ac..ed1cc85 100644
--- a/sub-government-screen-service/src/views/breed/index.vue
+++ b/sub-government-screen-service/src/views/breed/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="data-home-index">
-    <baseBg :name-val="'breed'">
+    <baseBg :name-val="'breed'" top-title="智慧养殖管理系统">
       <template #center>
         <el-row style="width: 100%; height: 100%">
           <el-col :span="6" class="left-charts">
@@ -10,9 +10,9 @@
           </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"></div>
+            <div class="right-charts-item"></div>
           </el-col>
         </el-row>
       </template>
@@ -33,8 +33,6 @@ import baseBg from '@/components/baseBg.vue';
   }
   .left-charts-item {
     width: 100%;
-    height: calc((100% - 30px) / 3);
-    background: #fff;
   }
 
   .right-charts {
@@ -47,7 +45,6 @@ import baseBg from '@/components/baseBg.vue';
   .right-charts-item {
     width: 100%;
     height: calc((100% - 30px) / 3);
-    background: #fff;
   }
 }
 </style>
diff --git a/sub-government-screen-service/src/views/early/index.vue b/sub-government-screen-service/src/views/early/index.vue
index cdf5d14..bad0b35 100644
--- a/sub-government-screen-service/src/views/early/index.vue
+++ b/sub-government-screen-service/src/views/early/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="data-home-index">
-    <baseBg :name-val="'early'">
+    <baseBg :name-val="'early'" top-title="产业预警管理系统">
       <template #center>
         <el-row style="width: 100%; height: 100%">
           <el-col :span="6" class="left-charts">
@@ -10,9 +10,9 @@
           </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"></div>
+            <div class="right-charts-item"></div>
           </el-col>
         </el-row>
       </template>
@@ -34,7 +34,6 @@ import baseBg from '@/components/baseBg.vue';
   .left-charts-item {
     width: 100%;
     height: calc((100% - 30px) / 3);
-    background: #fff;
   }
 
   .right-charts {
@@ -47,7 +46,6 @@ import baseBg from '@/components/baseBg.vue';
   .right-charts-item {
     width: 100%;
     height: calc((100% - 30px) / 3);
-    background: #fff;
   }
 }
 </style>
diff --git a/sub-government-screen-service/src/views/entities/components/benefitCharts.vue b/sub-government-screen-service/src/views/entities/components/benefitCharts.vue
new file mode 100644
index 0000000..cbe0d8d
--- /dev/null
+++ b/sub-government-screen-service/src/views/entities/components/benefitCharts.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="benefit-charts">
+    <custom-echart-bar :chart-data="chartsData.valData" height="100%" :option="chartsData.option" :is-series="true" />
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+
+const data = [1700, 800, 1700, 600, 800];
+const data2 = [2600, 1400, 3350, 1400, 1400];
+const colorArr1 = ['rgba(11, 83, 128)', 'rgba(2, 143, 224)', '#2a7fcc'];
+const colorArr2 = ['rgb(12, 109, 122)', 'rgba(1, 241, 228)', '#5ce1d6'];
+const color1 = {
+  type: 'linear',
+  x: 0,
+  x2: 1,
+  y: 0,
+  y2: 0,
+  colorStops: [
+    {
+      offset: 0,
+      color: colorArr1[0],
+    },
+    {
+      offset: 0.5,
+      color: colorArr1[0],
+    },
+    {
+      offset: 0.5,
+      color: colorArr1[1],
+    },
+    {
+      offset: 1,
+      color: colorArr1[1],
+    },
+  ],
+};
+const color2 = {
+  type: 'linear',
+  x: 0,
+  x2: 1,
+  y: 0,
+  y2: 0,
+  colorStops: [
+    {
+      offset: 0,
+      color: colorArr2[0],
+    },
+    {
+      offset: 0.5,
+      color: colorArr2[0],
+    },
+    {
+      offset: 0.5,
+      color: colorArr2[1],
+    },
+    {
+      offset: 1,
+      color: colorArr2[1],
+    },
+  ],
+};
+var barWidth = 18;
+const chartsData = reactive({
+  option: {
+    legend: {
+      show: false,
+    },
+    tooltip: {
+      trigger: 'axis',
+      formatter: function (params) {
+        var str = params[0].name + ':';
+        params.filter(function (item) {
+          if (item.componentSubType == 'bar') {
+            str += '<br/>' + item.seriesName + '：' + item.value;
+          }
+        });
+        return str;
+      },
+    },
+    //图表大小位置限制
+    grid: {
+      x: '10%',
+      x2: '5%',
+      y: '15%',
+      y2: '15%',
+    },
+    xAxis: {
+      data: ['肉类', '水果', '蔬菜', '水产', '谷物'],
+      //坐标轴
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 1,
+          color: '#214776',
+        },
+        textStyle: {
+          color: '#fff',
+          fontSize: '10',
+        },
+      },
+      type: 'category',
+      axisLabel: {
+        textStyle: {
+          color: '#C5DFFB',
+          fontWeight: 500,
+          fontSize: '14',
+        },
+      },
+      axisTick: {
+        textStyle: {
+          color: '#fff',
+          fontSize: '16',
+        },
+        show: false,
+      },
+    },
+    yAxis: {
+      name: ' ',
+      nameTextStyle: {
+        color: '#DEDEDE',
+        fontSize: 12,
+        padding: 10,
+      },
+      type: 'value',
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed', //线的类型 虚线0
+          opacity: 0.2, //透明度
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+      },
+      //坐标值标注
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: '#C5DFFB',
+        },
+      },
+    },
+    series: [
+      {
+        z: 1,
+        name: '绿色',
+        type: 'bar',
+        barWidth: barWidth,
+        barGap: '0%',
+        data: data,
+        itemStyle: {
+          normal: {
+            color: color2,
+          },
+        },
+      },
+      {
+        z: 3,
+        name: '绿色',
+        type: 'pictorialBar',
+        symbolPosition: 'end',
+        data: data,
+        symbol: 'diamond',
+        symbolOffset: ['0%', '-60%'],
+        symbolSize: [18, 12],
+        itemStyle: {
+          normal: {
+            borderWidth: 2,
+            color: colorArr2[2],
+          },
+        },
+      },
+    ],
+  },
+  valData: [
+    { value: 205, name: '肉类' },
+    { value: 308, name: '水果' },
+    { value: 359, name: '蔬菜' },
+    { value: 452, name: '水产' },
+    { value: 388, name: '谷物' },
+  ],
+});
+
+onMounted(() => {});
+</script>
+<style lang="scss" scoped>
+.benefit-charts {
+  height: 100%;
+}
+</style>
diff --git a/sub-government-screen-service/src/views/entities/components/categoryCharts.vue b/sub-government-screen-service/src/views/entities/components/categoryCharts.vue
new file mode 100644
index 0000000..eba6175
--- /dev/null
+++ b/sub-government-screen-service/src/views/entities/components/categoryCharts.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="category-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, name: '肉类' },
+    { value: 308, name: '水果' },
+    { value: 359, name: '蔬菜' },
+    { value: 452, name: '水产' },
+    { value: 388, 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>
+.category-charts {
+  height: 100%;
+}
+</style>
diff --git a/sub-government-screen-service/src/views/entities/components/entitiesCategoryCharts.vue b/sub-government-screen-service/src/views/entities/components/entitiesCategoryCharts.vue
new file mode 100644
index 0000000..4bf89c1
--- /dev/null
+++ b/sub-government-screen-service/src/views/entities/components/entitiesCategoryCharts.vue
@@ -0,0 +1,354 @@
+<template>
+  <div class="entities-category-charts">
+    <custom-echart-pie-3d :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+const dataList = reactive([
+  { name: '打车费', val: 1230, itemStyle: { color: 'rgba(56, 136, 235, 1)' } },
+  { name: '住宿费', val: 300, itemStyle: { color: 'rgba(113, 70, 159, 1)' } },
+  { name: '办公费', val: 800, itemStyle: { color: 'rgba(237, 171, 87, 1)' } },
+  { name: '差旅费', val: 500, itemStyle: { color: 'rgba(231, 89, 77, 1)' } },
+]);
+const heightProportion = ref(0.3); // 柱状扇形的高度比例
+
+// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+// #region
+const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, height) => {
+  // 计算
+  let midRatio = (startRatio + endRatio) / 3;
+
+  let startRadian = startRatio * Math.PI * 2;
+  let endRadian = endRatio * Math.PI * 2;
+  let midRadian = midRatio * Math.PI * 2;
+
+  // 如果只有一个扇形，则不实现选中效果。
+  if (startRatio === 0 && endRatio === 1) {
+    isSelected = false;
+  }
+
+  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+  k = typeof k !== 'undefined' ? k : 1 / 3;
+
+  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+  let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+  let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+
+  // 计算高亮效果的放大比例（未高亮，则比例为 1）
+  let hoverRate = isHovered ? 1.1 : 1;
+
+  // 返回曲面参数方程
+  return {
+    u: {
+      min: -Math.PI,
+      max: Math.PI * 3,
+      step: Math.PI / 32,
+    },
+
+    v: {
+      min: 0,
+      max: Math.PI * 2,
+      step: Math.PI / 20,
+    },
+
+    x: function (u, v) {
+      if (u < startRadian) {
+        return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      if (u > endRadian) {
+        return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+    },
+
+    y: function (u, v) {
+      if (u < startRadian) {
+        return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      if (u > endRadian) {
+        return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+      }
+      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+    },
+
+    z: function (u, v) {
+      if (u < -Math.PI * 0.5) {
+        return Math.sin(u);
+      }
+      if (u > Math.PI * 2.5) {
+        return Math.sin(u);
+      }
+      return Math.sin(v) > 0 ? heightProportion.value * height : -1;
+    },
+  };
+};
+// #endregion
+
+// 生成模拟 3D 饼图的配置项
+const getPie3D = (pieData, internalDiameterRatio) => {
+  let series = [];
+  let sumValue = 0;
+  let startValue = 0;
+  let endValue = 0;
+  let legendData = [];
+  let linesSeries = []; // line3D模拟label指示线
+  let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
+
+  // 为每一个饼图数据，生成一个 series-surface 配置
+  for (let i = 0; i < pieData.length; i++) {
+    sumValue += pieData[i].value;
+
+    let seriesItem = {
+      name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+      type: 'surface',
+      parametric: true,
+      wireframe: {
+        show: false,
+      },
+      pieData: pieData[i],
+      pieStatus: {
+        selected: false,
+        hovered: false,
+        k: k,
+      },
+    };
+
+    if (typeof pieData[i].itemStyle != 'undefined') {
+      let itemStyle = {};
+
+      typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
+      typeof pieData[i].itemStyle.opacity != 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
+
+      seriesItem.itemStyle = itemStyle;
+    }
+    series.push(seriesItem);
+  }
+
+  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+  for (let i = 0; i < series.length; i++) {
+    endValue = startValue + series[i].pieData.value;
+    // console.log(series[i]);
+    series[i].pieData.startRatio = startValue / sumValue;
+    series[i].pieData.endRatio = endValue / sumValue;
+    series[i].parametricEquation = getParametricEquation(
+      series[i].pieData.startRatio,
+      series[i].pieData.endRatio,
+      false,
+      false,
+      k,
+      series[i].pieData.value
+    );
+
+    startValue = endValue;
+
+    // 计算label指示线的起始和终点位置
+    // 计算扇区中心角度（弧度）
+    const midRadian = (series[i].pieData.startRatio + series[i].pieData.endRatio) * Math.PI;
+    // 计算扇区外缘顶部坐标（v=0时）
+    const radius = 1 + k; // 外径公式
+    const posX = Math.cos(midRadian) * radius;
+    const posY = Math.sin(midRadian) * radius;
+    // 获取该扇区实际高度
+    const posZ = heightProportion.value * series[i].pieData.value;
+    let flag = (midRadian >= 0 && midRadian <= Math.PI / 2) || (midRadian >= (3 * Math.PI) / 2 && midRadian <= Math.PI * 2) ? 1 : -1;
+    let color = pieData[i].itemStyle.color;
+    let turningPosArr = [posX * 1.1 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0), posY * 1.1 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0), posZ * 1];
+    let endPosArr = [posX * 1.2 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0), posY * 1.2 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0), posZ * 3];
+
+    linesSeries.push(
+      {
+        type: 'line3D',
+        lineStyle: {
+          color: color,
+        },
+        data: [[posX, posY, posZ], turningPosArr, endPosArr],
+      },
+      // https://www.isqqw.com/assets/layout/images/person.png
+      {
+        type: 'scatter3D',
+        label: {
+          show: true,
+          distance: 0,
+          position: 'center',
+          textStyle: {
+            color: '#ffffff',
+            backgroundColor: color,
+            borderWidth: 2,
+            fontSize: 14,
+            padding: 10,
+            borderRadius: 4,
+          },
+          formatter: '{b}',
+        },
+        symbolSize: 0,
+        data: [{ name: series[i].name + '\n' + series[i].pieData.val, value: endPosArr }],
+      }
+    );
+
+    legendData.push(series[i].name);
+  }
+  series = series.concat(linesSeries);
+
+  // 计算底座的缩放系数，根据k调整
+  const baseScale = 2; // 原始基础缩放系数
+  const scaleForBase = baseScale * (1 + k); // 动态调整缩放
+  // 最底下圆盘
+  series.push({
+    name: 'mouseoutSeries',
+    type: 'surface',
+    parametric: true,
+    wireframe: {
+      show: false,
+    },
+    itemStyle: {
+      opacity: 0.75,
+      color: 'rgba(51, 135, 146, 0.75)',
+    },
+    parametricEquation: {
+      u: {
+        min: 0,
+        max: Math.PI * 2,
+        step: Math.PI / 20,
+      },
+      v: {
+        min: 0,
+        max: Math.PI,
+        step: Math.PI / 20,
+      },
+      x: function (u, v) {
+        return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * scaleForBase;
+      },
+      y: function (u, v) {
+        return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * scaleForBase;
+      },
+      z: function (u, v) {
+        return Math.cos(v) > 0 ? -0 : -3.5;
+      },
+    },
+  });
+  series.push({
+    name: 'bottomRing',
+    type: 'surface',
+    parametric: true,
+    wireframe: {
+      show: false,
+    },
+    itemStyle: {
+      opacity: 0.6,
+      color: 'rgba(255, 255, 255, 1)',
+    },
+    parametricEquation: {
+      u: {
+        min: 0.74, // 控制环的内径（92%半径）
+        max: 0.75, // 外径（100%半径）
+        step: 0.0001,
+      },
+      v: {
+        min: 0,
+        max: Math.PI * 2, // 完整圆周
+        step: Math.PI / 20,
+      },
+      x: function (u, v) {
+        // 极坐标公式 + 动态缩放
+        return u * scaleForBase * 1.0 * Math.cos(v);
+      },
+      y: function (u, v) {
+        return u * scaleForBase * 1.0 * Math.sin(v);
+      },
+      z: function () {
+        // 保持原有高度差
+        return -3.6;
+      },
+    },
+  });
+  let maxHeight = Math.max(...pieData.map((item) => item.value)) * heightProportion.value;
+  series.push({
+    name: 'topRing',
+    type: 'surface',
+    parametric: true,
+    wireframe: {
+      show: false,
+    },
+    itemStyle: {
+      opacity: 0.6,
+      color: 'rgba(255, 255, 255, 1)',
+    },
+    parametricEquation: {
+      u: {
+        min: 0.54, // 控制环的内径（92%半径）
+        max: 0.55, // 外径（100%半径）
+        step: 0.0001,
+      },
+      v: {
+        min: 0,
+        max: Math.PI * 2, // 完整圆周
+        step: Math.PI / 20,
+      },
+      x: function (u, v) {
+        // 极坐标公式 + 动态缩放
+        return u * scaleForBase * 1.0 * Math.cos(v);
+      },
+      y: function (u, v) {
+        return u * scaleForBase * 1.0 * Math.sin(v);
+      },
+      z: function () {
+        // 保持原有高度差
+        return maxHeight + 0.1;
+      },
+    },
+  });
+  return series;
+};
+
+let total = 0;
+dataList.forEach((item) => {
+  total += item.val;
+});
+
+const chartsData = reactive({
+  option: {
+    backgroundColor: '#2d58e4',
+    xAxis3D: {
+      min: -1.5,
+      max: 1.5,
+    },
+    yAxis3D: {
+      min: -1.5,
+      max: 1.5,
+    },
+    zAxis3D: {
+      min: -1,
+      max: 1,
+    },
+    grid3D: {
+      show: false,
+      boxHeight: 4,
+      bottom: '50%',
+      viewControl: {
+        distance: 380,
+        alpha: 25,
+        beta: 60,
+        autoRotate: true, // 自动旋转
+      },
+    },
+  },
+  valData: [],
+});
+
+onMounted(() => {
+  chartsData.valData = getPie3D(
+    dataList.map((item) => {
+      item.value = Number(((item.val / total) * 100).toFixed(2));
+      return item;
+    }),
+    0
+  );
+});
+</script>
+<style lang="scss" scoped>
+.entities-category-charts {
+  height: 100%;
+}
+</style>
diff --git a/sub-government-screen-service/src/views/entities/components/entitiesStatistics.vue b/sub-government-screen-service/src/views/entities/components/entitiesStatistics.vue
new file mode 100644
index 0000000..b5cbac7
--- /dev/null
+++ b/sub-government-screen-service/src/views/entities/components/entitiesStatistics.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="entities-statistics">
+    <custom-echart-mixin :chart-data="chartsData.valData" :option="chartsData.option" height="100%" />
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+const chartsData = reactive({
+  option: {
+    color: ['#3685fe', '#41b879', '#ffd500', '#e57373'],
+    title: {
+      text: ' ',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    legend: {
+      show: true,
+      data: ['个体户', '村集体', '合作社', '经营企业', '趋势'],
+      left: '0', // 距离左侧10%的位置
+      top: '0', // 垂直居中
+      itemWidth: 15, // 图例标记的宽度
+      itemHeight: 8, // 图例标记的高度
+      textStyle: {
+        fontSize: 10, // 图例文字的字体大小
+        color: '#fff', // 图例文字的颜色
+      },
+    },
+    barStyle: {
+      barWidth: 18,
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: '数量',
+        axisLabel: {
+          formatter: '{value}',
+        },
+        itemStyle: { fontSize: 10 },
+      },
+      {
+        type: 'value',
+        name: '占比',
+        min: 0,
+        max: 100,
+        axisLabel: {
+          formatter: '{value} %',
+        },
+        itemStyle: { fontSize: 10 },
+      },
+    ],
+    grid: {
+      x: '10%',
+      x2: '15%',
+      y: '20%',
+      y2: '20%',
+    },
+  },
+  valData: [
+    { name: '耿马', value: 40, type: '个体户', seriesType: 'bar', stack: '耿马' },
+    { name: '耿马', value: 30, type: '村集体', seriesType: 'bar', stack: '耿马' },
+    { name: '耿马', value: 100, type: '合作社', seriesType: 'bar', stack: '耿马' },
+    { name: '耿马', value: 60, type: '经营企业', seriesType: 'bar', stack: '耿马', itemStyle: { borderRadius: [8, 8, 0, 0] } },
+    { name: '耿马', value: 10, type: '趋势', seriesType: 'line' },
+    { name: '大香乡', value: 20, type: '个体户', seriesType: 'bar', stack: '耿马' },
+    { name: '大香乡', value: 20, type: '村集体', seriesType: 'bar', stack: '耿马' },
+    { name: '大香乡', value: 80, type: '合作社', seriesType: 'bar', stack: '耿马' },
+    { name: '大香乡', value: 40, type: '经营企业', seriesType: 'bar', stack: '耿马', itemStyle: { borderRadius: [8, 8, 0, 0] } },
+    { name: '大香乡', value: 50, type: '趋势', seriesType: 'line' },
+  ],
+});
+
+onMounted(() => {});
+</script>
+<style lang="scss" scoped>
+.entities-statistics {
+  height: 100%;
+}
+</style>
diff --git a/sub-government-screen-service/src/views/entities/components/entitieslist.vue b/sub-government-screen-service/src/views/entities/components/entitieslist.vue
new file mode 100644
index 0000000..2c62c5c
--- /dev/null
+++ b/sub-government-screen-service/src/views/entities/components/entitieslist.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="demo roll-list-lentities" style="height: 90%">
+    <div class="list-item-header item-warp" :style="{ flex: listKeys.length }">
+      <template v-for="(h, indexh) in listKeys" :key="indexh">
+        <div class="item-td" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">{{ listKeysHeader[h] }}</div>
+      </template>
+    </div>
+    <vue3ScrollSeamless class="scroll-wrap" :class-options="classOptions" :data-list="list">
+      <div v-for="(item, index) in list" :key="index" class="list-item">
+        <div class="list-item-content">
+          <div class="list-item-boday item-warp" :style="{ flex: listKeys.length }">
+            <template v-for="(b, indexb) in listKeys" :key="indexb">
+              <div class="item-td" :class="{ 'zebra-b': (index + 1) % 2 == 0 }" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">
+                {{ item[b] }}
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </vue3ScrollSeamless>
+  </div>
+  <!-- </div> -->
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
+import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
+const props = defineProps({
+  //   items: {
+  //     type: Array,
+  //     default: () => [],
+  //   },
+});
+
+let list = reactive([
+  { title: '信达农资有限公司', type: '农药', time: '2025.01.02', duration: 8 },
+  { title: '方大种源有限公司', type: '种源', time: '2025.01.01', duration: 10 },
+  { title: '信誉种源有限公司', type: '种源', time: '2025.01.02', duration: 11 },
+  { title: '嘉兴包装有限公司', type: '生产加工', time: '2025.01.01', duration: 15 },
+  { title: '达国有限公司', type: '农资', time: '2025.01.02', duration: 14 },
+  { title: '华威种植专业合作社', type: '合作社', time: '2025.01.01', duration: 8 },
+  { title: '信誉种源合作社', type: '合作社', time: '2025.01.02', duration: 15 },
+  { title: '华泰种源有限公司', type: '种源', time: '2025.01.01', duration: 13 },
+  { title: '嘉德食品包装包装有限公司', type: '生产加工', time: '2025.01.02', duration: 5 },
+]);
+
+const listKeys = reactive(['title', 'type', 'time', 'duration']);
+const listKeysHeader = reactive({
+  title: '主体名称',
+  type: '主体类别',
+  time: '注册时间',
+  duration: '经营时间',
+});
+
+const classOptions = {
+  singleHeight: 48,
+};
+</script>
+
+<style scoped lang="scss">
+.roll-list-lentities {
+  margin-top: 8px;
+  .scroll-wrap {
+    height: 80%;
+    width: 100%;
+    margin: 4px auto;
+    overflow: hidden;
+  }
+  .list-item-header {
+    background: #144482;
+    font-size: 10px;
+    width: 100%;
+    .item-td {
+      padding: 8px 6px;
+    }
+  }
+  .list-item-boday {
+    background: transparent;
+    width: 100%;
+    .item-td {
+      padding: 4px 6px;
+      &.td-title {
+        color: #6cd1f9 !important;
+      }
+      &.zebra-b {
+        background: #051225 !important;
+      }
+    }
+  }
+  .item-warp {
+    display: inline-flex;
+    justify-content: space-around;
+    .item-td {
+      display: inline-block;
+      vertical-align: middle;
+
+      text-align: center;
+      color: #fff;
+    }
+  }
+  .list-item {
+    // border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
+    line-height: 18px;
+
+    .list-item-content {
+      display: inline-flex;
+      width: 100%;
+      justify-content: space-around;
+      position: relative;
+    }
+  }
+}
+.demo {
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: center;
+  //   margin-top: 10px;
+}
+</style>
diff --git a/sub-government-screen-service/src/views/entities/components/hotCharts.vue b/sub-government-screen-service/src/views/entities/components/hotCharts.vue
new file mode 100644
index 0000000..290eec9
--- /dev/null
+++ b/sub-government-screen-service/src/views/entities/components/hotCharts.vue
@@ -0,0 +1,87 @@
+<template>
+  <div ref="chartsWarp" class="hot-charts">
+    <custom-echart-bubble :chart-data="seriesData" height="100%" :option="chartsData.option" />
+  </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+
+const chartsData = reactive({
+  option: {},
+  valData: [
+    { name: '多菌灵', value: 6833.37 },
+    { name: '复合肥', value: 6823.93 },
+    { name: '水溶肥', value: 3529.8 },
+    { name: '大豆种子', value: 9773.04 },
+    { name: '农膜', value: 2992.33 },
+    { name: '草甘膦', value: 1448.23 },
+    { name: '其他', value: 3800.77 },
+  ],
+});
+
+let chartsWarp = ref(null);
+let seriesData = reactive([]);
+
+const compare = (propertyName) => {
+  return (object1, object2) => {
+    var value1 = object1[propertyName];
+    var value2 = object2[propertyName];
+    if (value2 < value1) {
+      return 1;
+    } else if (value2 > value1) {
+      return -1;
+    } else {
+      return 0;
+    }
+  };
+};
+
+onMounted(() => {
+  if (chartsData.valData && chartsData.valData.length) {
+    let datas = chartsData.valData.sort(compare('value')).reverse();
+    let maxValue = datas[0].value;
+    let colors = ['#4983F5', '#3D993D', '#525CCC', '#3344FF', '#39ACE5', '#008099', '#2985CC'];
+    let total = datas.reduce((acc, current) => {
+      return acc + current.value;
+    }, 0);
+    for (var i = 0; i < datas.length; i++) {
+      let acct = parseFloat((datas[i].value / total).toFixed(2));
+      if (acct < 0.2) {
+        acct = 0.2;
+      }
+      if (acct > 0.6) {
+        acct = 0.6;
+      }
+      let reference =
+        chartsWarp.value.clientHeight < chartsWarp.value.clientWidth
+          ? parseInt(chartsWarp.value.clientHeight)
+          : parseInt(chartsWarp.value.clientWidth);
+
+      var ss = parseInt(acct * reference * 1.3);
+      var color = colors[i];
+      var item = {
+        name: datas[i].name,
+        value: datas[i].value,
+        symbolSize: ss,
+        draggable: true,
+        itemStyle: {
+          normal: {
+            shadowBlur: 10,
+            shadowColor: color,
+            color: color,
+          },
+        },
+      };
+
+      seriesData.push(item);
+    }
+
+    console.info('seriesData', seriesData);
+  }
+});
+</script>
+<style lang="scss" scoped>
+.hot-charts {
+  height: 100%;
+}
+</style>
diff --git a/sub-government-screen-service/src/views/entities/index.vue b/sub-government-screen-service/src/views/entities/index.vue
index cb538e0..abf7717 100644
--- a/sub-government-screen-service/src/views/entities/index.vue
+++ b/sub-government-screen-service/src/views/entities/index.vue
@@ -1,18 +1,56 @@
 <template>
   <div class="data-home-index">
-    <baseBg :name-val="'entities'">
+    <baseBg :name-val="'entities'" 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">
+              <customBack top-title="生产经营主体类别统计" :top-postion="'left'">
+                <template #back>
+                  <!-- <entitiesCategoryCharts></entitiesCategoryCharts> -->
+                </template>
+              </customBack>
+            </div>
+            <div class="left-charts-item">
+              <customBack top-title="各乡镇经营主体统计" :top-postion="'left'">
+                <template #back>
+                  <entitiesStatistics></entitiesStatistics>
+                </template>
+              </customBack>
+            </div>
+            <div class="left-charts-item">
+              <customBack top-title="生产经营主体信息" :top-postion="'left'">
+                <template #back>
+                  <entitieslist></entitieslist>
+                </template>
+              </customBack>
+            </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">
+              <customBack top-title="经营类目统计" :top-postion="'right'">
+                <template #back>
+                  <categoryCharts></categoryCharts>
+                </template>
+              </customBack>
+            </div>
+            <div class="right-charts-item">
+              <customBack top-title="类目效益统计(亿元)" :top-postion="'right'">
+                <template #back>
+                  <benefitCharts></benefitCharts>
+                </template>
+              </customBack>
+            </div>
+            <div class="right-charts-item">
+              <customBack top-title="热门产品" :top-postion="'right'">
+                <template #back>
+                  <hotCharts></hotCharts>
+                </template>
+              </customBack>
+            </div>
           </el-col>
         </el-row>
       </template>
@@ -21,6 +59,14 @@
 </template>
 <script setup>
 import baseBg from '@/components/baseBg.vue';
+import customBack from '@/components/customBack.vue';
+import centerMap from '@/components/centerMap.vue';
+import categoryCharts from './components/categoryCharts.vue';
+import entitieslist from './components/entitieslist.vue';
+import hotCharts from './components/hotCharts.vue';
+import benefitCharts from './components/benefitCharts.vue';
+import entitiesStatistics from './components/entitiesStatistics.vue';
+import entitiesCategoryCharts from './components/entitiesCategoryCharts.vue';
 </script>
 <style lang="scss" scoped>
 .data-home-index {
@@ -34,7 +80,6 @@ import baseBg from '@/components/baseBg.vue';
   .left-charts-item {
     width: 100%;
     height: calc((100% - 30px) / 3);
-    background: #fff;
   }
 
   .right-charts {
@@ -47,7 +92,6 @@ import baseBg from '@/components/baseBg.vue';
   .right-charts-item {
     width: 100%;
     height: calc((100% - 30px) / 3);
-    background: #fff;
   }
 }
 </style>
diff --git a/sub-government-screen-service/src/views/home/components/comprehensive.vue b/sub-government-screen-service/src/views/home/components/comprehensive.vue
index 6c0f7d7..e3a9837 100644
--- a/sub-government-screen-service/src/views/home/components/comprehensive.vue
+++ b/sub-government-screen-service/src/views/home/components/comprehensive.vue
@@ -1,13 +1,28 @@
 <template>
   <div class="home-comprehensive-warp">
-    <el-row :gutter="10" class="data-item-row">
-      <el-col v-for="(n, index) in datalist" :key="index" :span="12" class="data-item">
+    <div class="data-item-row">
+      <div
+        v-for="(n, index) in datalist"
+        :key="index"
+        :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/home/partbg.png') + ')' }"
+        class="data-item"
+      >
         <div class="data-warp">
-          <span class="label">{{ n.label }}</span>
-          <span class="value">{{ n.value }}</span>
+          <div class="small-bg">
+            <img :src="getAssetsFile('images/vsualized/home/partbg1.png')" />
+            <img :src="getAssetsFile('images/vsualized/home/' + n.icon)" class="img-icon" />
+          </div>
+          <div class="data-pos">
+            <div class="data-pos-center">
+              <div class="c">
+                <span class="label">{{ n.label }}</span>
+                <span class="value">{{ n.value }}</span>
+              </div>
+            </div>
+          </div>
         </div>
-      </el-col>
-    </el-row>
+      </div>
+    </div>
   </div>
 </template>
 <script setup>
@@ -32,10 +47,10 @@ let topTitle = ref('');
 let pos = ref('');
 
 const datalist = reactive([
-  { label: '农业人口(万人)', value: 27.88 },
-  { label: '耕地面积(万亩)', value: 103.05 },
-  { label: '农业总产值(亿元)', value: 92.81 },
-  { label: '人均增收(万元)', value: 1.87 },
+  { label: '农业人口(万人)', value: 27.88, icon: 'farmers.png' },
+  { label: '耕地面积(万亩)', value: 103.05, icon: 'area.png' },
+  { label: '农业总产值(亿元)', value: 92.81, icon: 'outputVal.png' },
+  { label: '人均增收(万元)', value: 1.87, icon: 'Increase.png' },
 ]);
 
 onMounted(() => {
@@ -82,29 +97,70 @@ watch(
   height: 100%;
   .data-item-row {
     height: 100%;
+    display: inline-flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 10px;
   }
   .data-item {
-    height: calc(100% / 2);
+    height: calc((100% - 20px) / 2);
+    width: calc((100% - 20px) / 2);
     display: inline-flex;
     flex-direction: column;
     justify-content: center;
+    background-size: 100% 100%;
+    position: relative;
   }
   .data-warp {
     padding: 8px;
-
-    .label,
-    .value {
-      display: inline-block;
-      width: 100%;
+    text-align: center;
+    z-index: 1;
+    display: inline-flex;
+    justify-content: center;
+    padding-left: 20px;
+    .small-bg,
+    .data-pos {
+      display: inline-flex;
+      vertical-align: middle;
+      .data-pos-center {
+        display: inline-flex;
+        justify-content: space-around;
+        flex-direction: column;
+        height: 100%;
+        .pos-center {
+        }
+      }
     }
-    .label {
-      color: #fff;
-      font-size: 14px;
+    .small-bg {
+      width: 54px;
+      height: 54px;
+      position: relative;
+      .img-icon {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 38%;
+        height: 38%;
+      }
     }
-    .value {
-      color: #6cd1f9;
-      font-size: 14px;
-      font-weight: bold;
+    .data-pos {
+      width: calc(100% - 54px);
+      .label,
+      .value {
+        display: inline-block;
+        width: 100%;
+      }
+      .label {
+        color: #fff;
+        font-size: 13px;
+      }
+      .value {
+        color: #6cd1f9;
+        font-size: 16px;
+        font-weight: bold;
+        margin-top: 6px;
+      }
     }
   }
 }
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 eb4b979..069fc4c 100644
--- a/sub-government-screen-service/src/views/home/components/entitiesCharts.vue
+++ b/sub-government-screen-service/src/views/home/components/entitiesCharts.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="home-plant-breed-charts">
+  <div class="home-entities-charts">
     <custom-echart-pie :chart-data="plantBreed.valData" height="100%" :option="plantBreed.option" />
   </div>
 </template>
@@ -64,7 +64,7 @@ onMounted(() => {
 });
 </script>
 <style lang="scss" scoped>
-.home-plant-breed-charts {
+.home-entities-charts {
   height: 100%;
 }
 </style>
diff --git a/sub-government-screen-service/src/views/home/components/inputs.vue b/sub-government-screen-service/src/views/home/components/inputs.vue
index 2c416cd..ab7e27e 100644
--- a/sub-government-screen-service/src/views/home/components/inputs.vue
+++ b/sub-government-screen-service/src/views/home/components/inputs.vue
@@ -1,19 +1,31 @@
 <template>
-  <div class="home-comprehensive-warp">
-    <el-row :gutter="10" class="data-item-row">
-      <el-col
+  <div class="home-inputs-warp">
+    <div class="data-item-row">
+      <div
         v-for="(n, index) in datalist"
         :key="index"
-        :span="12"
         class="data-item"
-        :style="{ height: 'calc(100%' + ' / ' + datalist.length + ')' }"
+        :style="{
+          height: 'calc((100% - 20px)' + ' / ' + datalist.length / 2 + ')',
+          'background-image': 'url(' + getAssetsFile('images/vsualized/home/partbg2.png') + ')',
+        }"
       >
         <div class="data-warp">
-          <span class="label">{{ n.label }}</span>
-          <span class="value">{{ n.value }}</span>
+          <div class="data-pos">
+            <div class="data-pos-center">
+              <div class="c">
+                <span class="label">{{ n.label }}</span>
+                <span class="value">{{ n.value }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="small-bg">
+            <img :src="getAssetsFile('images/vsualized/home/partbg3.png')" />
+            <img :src="getAssetsFile('images/vsualized/home/' + n.icon)" class="img-icon" />
+          </div>
         </div>
-      </el-col>
-    </el-row>
+      </div>
+    </div>
   </div>
 </template>
 <script setup>
@@ -38,12 +50,12 @@ let topTitle = ref('');
 let pos = ref('');
 
 const datalist = reactive([
-  { label: '农机使用(台)', value: 8000 },
-  { label: '农药使用(吨)', value: 5000 },
-  { label: '肥料使用(吨)', value: 9000 },
-  { label: '种源使用', value: 4800 },
-  { label: '兽药(吨)', value: 10 },
-  { label: '饲料(吨)', value: 88943 },
+  { label: '农机使用(台)', value: 8000, icon: 'farmuse.png' },
+  { label: '农药使用(吨)', value: 5000, icon: 'pesticide.png' },
+  { label: '肥料使用(吨)', value: 9000, icon: 'fertilizer.png' },
+  { label: '种源使用', value: 4800, icon: 'provenance.png' },
+  { label: '兽药(吨)', value: 10, icon: 'animalm.png' },
+  { label: '饲料(吨)', value: 88943, icon: 'feeduse.png' },
 ]);
 
 onMounted(() => {
@@ -68,32 +80,73 @@ watch(
 );
 </script>
 <style lang="scss" scoped>
-.home-comprehensive-warp {
+.home-inputs-warp {
   height: 100%;
   .data-item-row {
     height: 100%;
+    display: inline-flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 10px;
   }
   .data-item {
     display: inline-flex;
     flex-direction: column;
     justify-content: center;
+    background-size: 100% 100%;
+    position: relative;
+    width: calc((100% - 20px) / 2);
   }
   .data-warp {
     padding: 8px;
-
-    .label,
-    .value {
-      display: inline-block;
-      width: 100%;
+    text-align: center;
+    z-index: 1;
+    display: inline-flex;
+    justify-content: center;
+    padding-left: 20px;
+    .small-bg,
+    .data-pos {
+      display: inline-flex;
+      vertical-align: middle;
+      .data-pos-center {
+        display: inline-flex;
+        justify-content: space-around;
+        flex-direction: column;
+        height: 100%;
+        .pos-center {
+        }
+      }
     }
-    .label {
-      color: #fff;
-      font-size: 14px;
+    .small-bg {
+      width: 45px;
+      height: 45px;
+      position: relative;
+      .img-icon {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 38%;
+        height: 38%;
+      }
     }
-    .value {
-      color: #6cd1f9;
-      font-size: 14px;
-      font-weight: bold;
+    .data-pos {
+      width: calc(100% - 54px);
+      .label,
+      .value {
+        display: inline-block;
+        width: 100%;
+      }
+      .label {
+        color: #fff;
+        font-size: 13px;
+      }
+      .value {
+        color: #6cd1f9;
+        font-size: 16px;
+        font-weight: bold;
+        margin-top: 6px;
+      }
     }
   }
 }
diff --git a/sub-government-screen-service/src/views/home/components/traceCharts.vue b/sub-government-screen-service/src/views/home/components/traceCharts.vue
index 72b5546..3986091 100644
--- a/sub-government-screen-service/src/views/home/components/traceCharts.vue
+++ b/sub-government-screen-service/src/views/home/components/traceCharts.vue
@@ -8,6 +8,13 @@ import { ref, reactive, onMounted } from 'vue';
 
 const chartsData = ref({
   option: {
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '6%',
+      top: '18%',
+      containLabel: true,
+    },
     color: ['#3685fe', '#41b879', '#ffd500', '#e57373'],
     title: {
       text: ' ',
@@ -21,7 +28,7 @@ const chartsData = ref({
     yAxis: [
       {
         type: 'value',
-        name: '赋码',
+        name: ' ',
         axisLabel: {
           formatter: '{value}',
         },
diff --git a/sub-government-screen-service/src/views/home/index.vue b/sub-government-screen-service/src/views/home/index.vue
index 8afad45..e570c36 100644
--- a/sub-government-screen-service/src/views/home/index.vue
+++ b/sub-government-screen-service/src/views/home/index.vue
@@ -6,33 +6,51 @@
         <el-row style="width: 100%; height: 100%">
           <el-col :span="6" class="left-charts">
             <div class="left-charts-item">
-              <subTop title="综合数据统计" :postion="'left'"></subTop>
-              <comprehensive></comprehensive>
+              <customBack top-title="综合数据统计" :top-postion="'left'">
+                <template #back>
+                  <comprehensive></comprehensive>
+                </template>
+              </customBack>
             </div>
             <div class="left-charts-item">
-              <subTop title="土地分布数据统计" :postion="'left'"></subTop>
-              <rolllist :items="rollDataList"></rolllist>
+              <customBack top-title="土地分布数据统计" :top-postion="'left'">
+                <template #back>
+                  <rolllist :items="rollDataList"></rolllist>
+                </template>
+              </customBack>
             </div>
             <div class="left-charts-item">
-              <subTop title="种养殖数据统计" :postion="'left'"></subTop>
-              <plantBreedCharts></plantBreedCharts>
+              <customBack top-title="种养殖数据统计" :top-postion="'left'">
+                <template #back>
+                  <plantBreedCharts></plantBreedCharts>
+                </template>
+              </customBack>
             </div>
           </el-col>
           <el-col :span="12">
             <centerMap></centerMap>
           </el-col>
           <el-col :span="6" class="right-charts">
-            <subTop title="使用投入品数据统计" :postion="'right'"></subTop>
             <div class="right-charts-item">
-              <inputs></inputs>
+              <customBack top-title="使用投入品数据统计" :top-postion="'left'">
+                <template #back>
+                  <inputs></inputs>
+                </template>
+              </customBack>
             </div>
             <div class="right-charts-item">
-              <subTop title="经营主体数据统计" :postion="'right'"></subTop>
-              <entitiesCharts></entitiesCharts>
+              <customBack top-title="经营主体数据统计" :top-postion="'left'">
+                <template #back>
+                  <entitiesCharts></entitiesCharts>
+                </template>
+              </customBack>
             </div>
             <div class="right-charts-item">
-              <subTop title="溯源赋码与扫码数据统计" :postion="'right'"></subTop>
-              <traceCharts></traceCharts>
+              <customBack top-title="溯源赋码与扫码数据统计" :top-postion="'left'">
+                <template #back>
+                  <traceCharts></traceCharts>
+                </template>
+              </customBack>
             </div>
           </el-col>
         </el-row>
@@ -40,7 +58,7 @@
     </baseBg>
 
     <div class="home-index-top-warp">
-      <div class="home-index-top">
+      <div class="home-index-top" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/home/hometopbg.png') + ')' }">
         <h3 class="home-title">耿马县农产品销售情况</h3>
         <div class="home-data-top">￥1284.624万</div>
         <div class="home-data-contrast">
@@ -56,7 +74,7 @@
 </template>
 <script setup>
 import baseBg from '@/components/baseBg.vue';
-import subTop from '@/components/subTop.vue';
+import customBack from '@/components/customBack.vue';
 import centerMap from '@/components/centerMap.vue';
 import comprehensive from './components/comprehensive.vue';
 import plantBreedCharts from './components/plantBreedCharts.vue';
@@ -98,6 +116,9 @@ let rollDataList = reactive([
     text-align: center;
     .home-index-top {
       margin: auto;
+      background-repeat: no-repeat;
+      background-position: center 28px;
+      background-size: contain;
       .home-title {
         display: inline-block;
         font-size: 18px;
@@ -114,7 +135,7 @@ let rollDataList = reactive([
         font-weight: bold;
         color: #fff;
         letter-spacing: 8px;
-        margin: 12px 0;
+        margin: 26px 0 0 0;
       }
       .home-data-contrast {
         .tips {
diff --git a/sub-government-screen-service/src/views/inputs/components/dealerDistributionCharts.vue b/sub-government-screen-service/src/views/inputs/components/dealerDistributionCharts.vue
new file mode 100644
index 0000000..677146c
--- /dev/null
+++ b/sub-government-screen-service/src/views/inputs/components/dealerDistributionCharts.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="dealer-distribution-charts">
+    <custom-echart-bar :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: '2%',
+      top: '18%',
+      containLabel: true,
+    },
+    title: {
+      text: ' ',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    label: {
+      color: '#333',
+    },
+    barStyle: {
+      barWidth: 15,
+      itemStyle: {
+        borderRadius: [8, 8, 0, 0], // 设置柱子的圆角半径
+      },
+      color: {
+        type: 'linear', // 线性渐变
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          { offset: 0, color: '#45bfe9' },
+          { offset: 1, color: '#01589c' },
+        ],
+        global: false, // 默认为 false
+      },
+    },
+    legend: {
+      show: false,
+    },
+  },
+  valData: [
+    { value: 80, type: '经销商', name: '耿马镇' },
+    { value: 105, type: '经销商', name: '勐撒镇' },
+    { value: 100, type: '经销商', name: '勐永镇' },
+    { value: 125, type: '经销商', name: '孟定镇' },
+    { value: 217, type: '经销商', name: '勐简乡' },
+    { value: 200, type: '经销商', name: '贺派乡' },
+    { value: 155, type: '经销商', name: '四排山乡' },
+    { value: 80, type: '经销商', name: '芒洪乡' },
+    { value: 105, type: '经销商', name: '大兴乡' },
+  ],
+});
+</script>
+<style lang="scss" scoped>
+.dealer-distribution-charts {
+  height: 100%;
+}
+</style>
diff --git a/sub-government-screen-service/src/views/inputs/components/inputsGmp.vue b/sub-government-screen-service/src/views/inputs/components/inputsGmp.vue
new file mode 100644
index 0000000..9d56453
--- /dev/null
+++ b/sub-government-screen-service/src/views/inputs/components/inputsGmp.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="inputs-gmp-charts">
+    <custom-echart-pie :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',
+      },
+    },
+    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, name: '耿马镇' },
+    { value: 308, name: '勐撒镇' },
+    { value: 359, name: '勐永镇' },
+    { value: 452, name: '孟定镇' },
+    { value: 388, name: '勐简乡' },
+    { value: 508, name: '贺派乡' },
+    { value: 369, name: '四排山乡' },
+    { value: 610, name: '芒洪乡' },
+    { value: 754, name: '大兴乡' },
+  ],
+});
+
+onMounted(() => {
+  if (chartsData.valData && chartsData.valData.length) {
+    chartsData.valData.forEach((m, index) => {
+      let num = 100;
+      m.value = (Number(m.value) + Math.random() + num).toFixed(2);
+    });
+  }
+});
+</script>
+<style lang="scss" scoped>
+.inputs-gmp-charts {
+  height: 100%;
+}
+</style>
diff --git a/sub-government-screen-service/src/views/inputs/components/landbreedCharts.vue b/sub-government-screen-service/src/views/inputs/components/landbreedCharts.vue
new file mode 100644
index 0000000..6344692
--- /dev/null
+++ b/sub-government-screen-service/src/views/inputs/components/landbreedCharts.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="demo roll-list-land-plan" style="height: 90%">
+    <div class="list-item-header item-warp" :style="{ flex: listKeys.length }">
+      <template v-for="(h, indexh) in listKeys" :key="indexh">
+        <div class="item-td" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">{{ listKeysHeader[h] }}</div>
+      </template>
+    </div>
+    <vue3ScrollSeamless class="scroll-wrap" :class-options="classOptions" :data-list="list">
+      <div v-for="(item, index) in list" :key="index" class="list-item">
+        <div class="list-item-content">
+          <div class="list-item-boday item-warp" :style="{ flex: listKeys.length }">
+            <template v-for="(b, indexb) in listKeys" :key="indexb">
+              <div class="item-td" :class="{ 'zebra-b': (index + 1) % 2 == 0 }" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">
+                {{ item[b] }}
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </vue3ScrollSeamless>
+  </div>
+  <!-- </div> -->
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
+import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
+const props = defineProps({
+  //   items: {
+  //     type: Array,
+  //     default: () => [],
+  //   },
+});
+
+let list = reactive([
+  { title: '耿马镇', type: '吡虫啉', time: '2025.01.02', info: '经销商资质不合格' },
+  { title: '勐撒镇', type: '多菌灵', time: '2025.01.01', info: '农药成分不合格' },
+  { title: '孟定镇', type: '氯化钾', time: '2025.01.02', info: '经销商资质不合格' },
+  { title: '孟简镇', type: 'NPK 复合肥', time: '2025.01.01', info: '成分不合格' },
+  { title: '孟永镇', type: '青霉素', time: '2025.01.02', info: '经销商资质不合格' },
+  { title: '大兴乡', type: '口蹄疫疫苗', time: '2025.01.01', info: '经销商资质不完全' },
+  { title: '芒洪乡', type: '大豆种子', time: '2025.01.02', info: '种源质量不好' },
+  { title: '四排山乡', type: '番茄种子', time: '2025.01.01', info: '经销商资质不合格' },
+  { title: '贺派乡', type: '草甘膦', time: '2025.01.02', info: '农药成分不合格' },
+]);
+
+const listKeys = reactive(['title', 'type', 'time', 'info']);
+const listKeysHeader = reactive({
+  title: '乡/镇',
+  type: '投入品种类',
+  time: '时间',
+  info: '案件信息',
+});
+
+const classOptions = {
+  singleHeight: 48,
+};
+</script>
+
+<style scoped lang="scss">
+.roll-list-land-plan {
+  margin-top: 8px;
+  .scroll-wrap {
+    height: 80%;
+    width: 100%;
+    margin: 4px auto;
+    overflow: hidden;
+  }
+  .list-item-header {
+    background: #144482;
+    font-size: 10px;
+    width: 100%;
+    .item-td {
+      padding: 8px 6px;
+    }
+  }
+  .list-item-boday {
+    background: transparent;
+    width: 100%;
+    .item-td {
+      padding: 4px 6px;
+      &.td-title {
+        color: #6cd1f9 !important;
+      }
+      &.zebra-b {
+        background: #051225 !important;
+      }
+    }
+  }
+  .item-warp {
+    display: inline-flex;
+    justify-content: space-around;
+    .item-td {
+      display: inline-block;
+      vertical-align: middle;
+
+      text-align: center;
+      color: #fff;
+    }
+  }
+  .list-item {
+    // border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
+    line-height: 18px;
+
+    .list-item-content {
+      display: inline-flex;
+      width: 100%;
+      justify-content: space-around;
+      position: relative;
+    }
+  }
+}
+.demo {
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: center;
+  //   margin-top: 10px;
+}
+</style>
diff --git a/sub-government-screen-service/src/views/inputs/components/monthlyuseCharts.vue b/sub-government-screen-service/src/views/inputs/components/monthlyuseCharts.vue
new file mode 100644
index 0000000..667b7dc
--- /dev/null
+++ b/sub-government-screen-service/src/views/inputs/components/monthlyuseCharts.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="monthly-use-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: '2%',
+      top: '18%',
+      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: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+    },
+    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, 200, 300, 150],
+      },
+      {
+        name: '肥料',
+        type: 'line',
+        data: [485, 182, 353, 265, 290, 354, 215, 200, 158, 600, 158, 320],
+      },
+      {
+        name: '种源',
+        type: 'line',
+        data: [120, 516, 238, 453, 368, 519, 432, 128, 578, 120, 578, 324],
+      },
+      {
+        name: '兽药',
+        type: 'line',
+        data: [120, 132, 101, 134, 90, 230, 210, 500, 600, 565, 134, 256],
+      },
+      {
+        name: '农机',
+        type: 'line',
+        data: [485, 182, 353, 265, 290, 354, 215, 200, 158, 326, 456, 189],
+      },
+    ],
+  },
+});
+</script>
+<style lang="scss" scoped>
+.monthly-use-charts {
+  height: 100%;
+}
+</style>
diff --git a/sub-government-screen-service/src/views/inputs/index.vue b/sub-government-screen-service/src/views/inputs/index.vue
index 35fff73..2b85311 100644
--- a/sub-government-screen-service/src/views/inputs/index.vue
+++ b/sub-government-screen-service/src/views/inputs/index.vue
@@ -1,18 +1,52 @@
 <template>
   <div class="data-home-index">
-    <baseBg :name-val="'inputs'">
+    <baseBg :name-val="'inputs'" 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">
+              <customBack top-title="投入品分类统计" :top-postion="'left'">
+                <template #back> </template>
+              </customBack>
+            </div>
+            <div class="left-charts-item">
+              <customBack top-title="投入品生产企业统计" :top-postion="'left'">
+                <template #back>
+                  <inputsGmp></inputsGmp>
+                </template>
+              </customBack>
+            </div>
+            <div class="left-charts-item">
+              <customBack top-title="种养殖数据统计" :top-postion="'left'">
+                <template #back>
+                  <landbreedCharts></landbreedCharts>
+                </template>
+              </customBack>
+            </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">
+              <customBack top-title="案件次数" :top-postion="'right'">
+                <template #back> </template>
+              </customBack>
+            </div>
+            <div class="right-charts-item">
+              <customBack top-title="投入品月度使用统计" :top-postion="'right'">
+                <template #back>
+                  <monthlyuseCharts></monthlyuseCharts>
+                </template>
+              </customBack>
+            </div>
+            <div class="right-charts-item">
+              <customBack top-title="投入品经销商分布" :top-postion="'right'">
+                <template #back>
+                  <dealerDistributionCharts></dealerDistributionCharts>
+                </template>
+              </customBack>
+            </div>
           </el-col>
         </el-row>
       </template>
@@ -21,6 +55,12 @@
 </template>
 <script setup>
 import baseBg from '@/components/baseBg.vue';
+import customBack from '@/components/customBack.vue';
+import centerMap from '@/components/centerMap.vue';
+import inputsGmp from './components/inputsGmp.vue';
+import landbreedCharts from './components/landbreedCharts.vue';
+import monthlyuseCharts from './components/monthlyuseCharts.vue';
+import dealerDistributionCharts from './components/dealerDistributionCharts.vue';
 </script>
 <style lang="scss" scoped>
 .data-home-index {
@@ -34,7 +74,6 @@ import baseBg from '@/components/baseBg.vue';
   .left-charts-item {
     width: 100%;
     height: calc((100% - 30px) / 3);
-    background: #fff;
   }
 
   .right-charts {
@@ -47,7 +86,6 @@ import baseBg from '@/components/baseBg.vue';
   .right-charts-item {
     width: 100%;
     height: calc((100% - 30px) / 3);
-    background: #fff;
   }
 }
 </style>
diff --git a/sub-government-screen-service/src/views/land/components/distributionCharts.vue b/sub-government-screen-service/src/views/land/components/distributionCharts.vue
index fe44eb9..cc18c66 100644
--- a/sub-government-screen-service/src/views/land/components/distributionCharts.vue
+++ b/sub-government-screen-service/src/views/land/components/distributionCharts.vue
@@ -69,6 +69,6 @@ onMounted(() => {
 </script>
 <style lang="scss" scoped>
 .distribution-charts {
-  height: 90%;
+  height: 100%;
 }
 </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
index 834670e..e012836 100644
--- a/sub-government-screen-service/src/views/land/components/landCirculation.vue
+++ b/sub-government-screen-service/src/views/land/components/landCirculation.vue
@@ -1,71 +1,113 @@
 <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 class="demo roll-list-circulation" style="height: 90%">
+    <div class="list-item-header item-warp" :style="{ flex: listKeys.length }">
+      <template v-for="(h, indexh) in listKeys" :key="indexh">
+        <div class="item-td" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">{{ listKeysHeader[h] }}</div>
+      </template>
+    </div>
+    <vue3ScrollSeamless class="scroll-wrap" :class-options="classOptions" :data-list="list">
+      <div v-for="(item, index) in list" :key="index" class="list-item">
+        <div class="list-item-content">
+          <div class="list-item-boday item-warp" :style="{ flex: listKeys.length }">
+            <template v-for="(b, indexb) in listKeys" :key="indexb">
+              <div class="item-td" :class="{ 'td-title': b == 'title' }" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">
+                {{ item[b] }}
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </vue3ScrollSeamless>
   </div>
+  <!-- </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' },
+import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
+import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
+const props = defineProps({
+  //   items: {
+  //     type: Array,
+  //     default: () => [],
+  //   },
+});
+
+let list = reactive([
+  { 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 '';
+
+const listKeys = reactive(['title', 'demandArea', 'dealArea', 'maxPrice', 'minPrice']);
+const listKeysHeader = reactive({
+  title: '乡/镇',
+  demandArea: '需求面积',
+  dealArea: '成交面积',
+  maxPrice: '最高价',
+  minPrice: '最高价',
+});
+
+const classOptions = {
+  singleHeight: 48,
 };
 </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;
+<style scoped lang="scss">
+.roll-list-circulation {
+  margin-top: 8px;
+  .scroll-wrap {
+    height: 80%;
+    width: 100%;
+    margin: 4px auto;
+    overflow: hidden;
+  }
+  .list-item-header {
+    background: #144482;
+    font-size: 10px;
+    width: 100%;
+    .item-td {
+      padding: 8px 6px;
     }
-    .el-table--enable-row-hover .el-table__body tr:hover > td {
-      background-color: transparent !important; /* 设置你想要的 hover 颜色 */
-      cursor: pointer;
+  }
+  .list-item-boday {
+    background: transparent;
+    width: 100%;
+    .item-td {
+      padding: 4px 6px;
+      &.td-title {
+        color: #6cd1f9 !important;
+      }
+    }
+  }
+  .item-warp {
+    display: inline-flex;
+    justify-content: space-around;
+    .item-td {
+      display: inline-block;
+      vertical-align: middle;
+
+      text-align: center;
+      color: #fff;
+    }
+  }
+  .list-item {
+    // border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
+    line-height: 18px;
+
+    .list-item-content {
+      display: inline-flex;
+      width: 100%;
+      justify-content: space-around;
+      position: relative;
     }
   }
 }
+.demo {
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: center;
+  //   margin-top: 10px;
+}
 </style>
diff --git a/sub-government-screen-service/src/views/land/components/landPatrol.vue b/sub-government-screen-service/src/views/land/components/landPatrol.vue
new file mode 100644
index 0000000..44d4010
--- /dev/null
+++ b/sub-government-screen-service/src/views/land/components/landPatrol.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="demo roll-list-patrol" style="height: 90%">
+    <div class="list-item-header item-warp" :style="{ flex: listKeys.length }">
+      <template v-for="(h, indexh) in listKeys" :key="indexh">
+        <div class="item-td" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">{{ listKeysHeader[h] }}</div>
+      </template>
+    </div>
+    <vue3ScrollSeamless class="scroll-wrap" :class-options="classOptions" :data-list="list">
+      <div v-for="(item, index) in list" :key="index" class="list-item">
+        <div class="list-item-content">
+          <div class="list-item-boday item-warp" :style="{ flex: listKeys.length }">
+            <template v-for="(b, indexb) in listKeys" :key="indexb">
+              <div class="item-td" :class="item.status == 1 ? 'td-title' : 'td-warn'" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">
+                <span v-if="b != 'status'">
+                  {{ item[b] }}
+                </span>
+                <el-icon v-else>
+                  <Bell></Bell>
+                </el-icon>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </vue3ScrollSeamless>
+  </div>
+  <!-- </div> -->
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
+import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
+const props = defineProps({
+  //   items: {
+  //     type: Array,
+  //     default: () => [],
+  //   },
+});
+
+let list = reactive([
+  { title: '耿马镇', waitNum: '24', violation: '14', status: 1 },
+  { title: '勐撒镇', waitNum: '16', violation: '14', status: 1 },
+  { title: '孟定镇', waitNum: '8', violation: '24', status: 0 },
+  { title: '孟简镇', waitNum: '9', violation: '8', status: 1 },
+  { title: '孟永镇', waitNum: '14', violation: '15', status: 1 },
+]);
+
+const listKeys = reactive(['title', 'waitNum', 'violation', 'status']);
+const listKeysHeader = reactive({
+  title: '乡/镇',
+  waitNum: '待巡查',
+  violation: '违规案件',
+  status: '预警',
+});
+
+const classOptions = {
+  singleHeight: 48,
+};
+</script>
+
+<style scoped lang="scss">
+.roll-list-patrol {
+  margin-top: 8px;
+  .scroll-wrap {
+    height: 80%;
+    width: 100%;
+    margin: 4px auto;
+    overflow: hidden;
+  }
+  .list-item-header {
+    background: #144482;
+    font-size: 10px;
+    width: 100%;
+    .item-td {
+      padding: 8px 6px;
+    }
+  }
+  .list-item-boday {
+    background: transparent;
+    width: 100%;
+    .item-td {
+      padding: 4px 6px;
+      &.td-title {
+        color: #6cd1f9 !important;
+      }
+
+      &.td-warn {
+        color: red !important;
+      }
+    }
+  }
+  .item-warp {
+    display: inline-flex;
+    justify-content: space-around;
+    .item-td {
+      display: inline-block;
+      vertical-align: middle;
+
+      text-align: center;
+      color: #fff;
+    }
+  }
+  .list-item {
+    // border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
+    line-height: 18px;
+
+    .list-item-content {
+      display: inline-flex;
+      width: 100%;
+      justify-content: space-around;
+      position: relative;
+    }
+  }
+}
+.demo {
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: center;
+  //   margin-top: 10px;
+}
+</style>
diff --git a/sub-government-screen-service/src/views/land/components/landPlan.vue b/sub-government-screen-service/src/views/land/components/landPlan.vue
new file mode 100644
index 0000000..6fc1aed
--- /dev/null
+++ b/sub-government-screen-service/src/views/land/components/landPlan.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="demo roll-list-land-plan" style="height: 90%">
+    <div class="list-item-header item-warp" :style="{ flex: listKeys.length }">
+      <template v-for="(h, indexh) in listKeys" :key="indexh">
+        <div class="item-td" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">{{ listKeysHeader[h] }}</div>
+      </template>
+    </div>
+    <vue3ScrollSeamless class="scroll-wrap" :class-options="classOptions" :data-list="list">
+      <div v-for="(item, index) in list" :key="index" class="list-item">
+        <div class="list-item-content">
+          <div class="list-item-boday item-warp" :style="{ flex: listKeys.length }">
+            <template v-for="(b, indexb) in listKeys" :key="indexb">
+              <div class="item-td" :class="{ 'zebra-b': (index + 1) % 2 == 0 }" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">
+                {{ item[b] }}
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </vue3ScrollSeamless>
+  </div>
+  <!-- </div> -->
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
+import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
+const props = defineProps({
+  //   items: {
+  //     type: Array,
+  //     default: () => [],
+  //   },
+});
+
+let list = reactive([
+  { title: '耿马镇', area: '540', chg: '0.5%' },
+  { title: '勐撒镇', area: '1210', chg: '0.7%' },
+  { title: '孟定镇', area: '188.3', chg: '-0.8%' },
+  { title: '孟简镇', area: '98.7', chg: '1.2%' },
+  { title: '孟永镇', area: '165.5', chg: '0.9%' },
+]);
+
+const listKeys = reactive(['title', 'area', 'chg']);
+const listKeysHeader = reactive({
+  title: '乡/镇',
+  area: '面积',
+  chg: '涨跌幅',
+});
+
+const classOptions = {
+  singleHeight: 48,
+};
+</script>
+
+<style scoped lang="scss">
+.roll-list-land-plan {
+  margin-top: 8px;
+  .scroll-wrap {
+    height: 80%;
+    width: 100%;
+    margin: 4px auto;
+    overflow: hidden;
+  }
+  .list-item-header {
+    background: #144482;
+    font-size: 10px;
+    width: 100%;
+    .item-td {
+      padding: 8px 6px;
+    }
+  }
+  .list-item-boday {
+    background: transparent;
+    width: 100%;
+    .item-td {
+      padding: 4px 6px;
+      &.td-title {
+        color: #6cd1f9 !important;
+      }
+      &.zebra-b {
+        background: #051225 !important;
+      }
+    }
+  }
+  .item-warp {
+    display: inline-flex;
+    justify-content: space-around;
+    .item-td {
+      display: inline-block;
+      vertical-align: middle;
+
+      text-align: center;
+      color: #fff;
+    }
+  }
+  .list-item {
+    // border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
+    line-height: 18px;
+
+    .list-item-content {
+      display: inline-flex;
+      width: 100%;
+      justify-content: space-around;
+      position: relative;
+    }
+  }
+}
+.demo {
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: center;
+  //   margin-top: 10px;
+}
+</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
index c4a1791..cc51223 100644
--- a/sub-government-screen-service/src/views/land/components/landareaCharts.vue
+++ b/sub-government-screen-service/src/views/land/components/landareaCharts.vue
@@ -113,6 +113,6 @@ const chartsData = reactive({
 </script>
 <style lang="scss" scoped>
 .land-area-charts {
-  height: 90%;
+  height: 100%;
 }
 </style>
diff --git a/sub-government-screen-service/src/views/land/index.vue b/sub-government-screen-service/src/views/land/index.vue
index 2b4d842..e0573fc 100644
--- a/sub-government-screen-service/src/views/land/index.vue
+++ b/sub-government-screen-service/src/views/land/index.vue
@@ -5,15 +5,25 @@
         <el-row style="width: 100%; height: 100%">
           <el-col :span="6" class="left-charts">
             <div class="left-charts-item">
-              <subTop title="土地资源分布" :postion="'left'"></subTop>
-              <distributionCharts></distributionCharts>
+              <customBack top-title="土地资源分布" :top-postion="'left'">
+                <template #back>
+                  <distributionCharts></distributionCharts>
+                </template>
+              </customBack>
             </div>
             <div class="left-charts-item">
-              <subTop title="土地流转信息" :postion="'left'"></subTop>
-              <landCirculation></landCirculation>
+              <customBack top-title="土地流转信息" :top-postion="'left'">
+                <template #back>
+                  <landCirculation></landCirculation>
+                </template>
+              </customBack>
             </div>
             <div class="left-charts-item">
-              <subTop title="土地使用巡查案件" :postion="'left'"></subTop>
+              <customBack top-title="土地使用巡查案件" :top-postion="'left'">
+                <template #back>
+                  <landPatrol></landPatrol>
+                </template>
+              </customBack>
             </div>
           </el-col>
           <el-col :span="12">
@@ -21,15 +31,25 @@
           </el-col>
           <el-col :span="6" class="right-charts">
             <div class="right-charts-item">
-              <subTop title="农用地数据统计" :postion="'right'"></subTop>
-              <landuseCharts></landuseCharts>
+              <customBack top-title="农用地数据统计" :top-postion="'right'">
+                <template #back>
+                  <landuseCharts></landuseCharts>
+                </template>
+              </customBack>
             </div>
             <div class="right-charts-item">
-              <subTop title="年度农用地规划面积" :postion="'right'"></subTop>
+              <customBack top-title="年度农用地规划面积" :top-postion="'right'">
+                <template #back>
+                  <landPlan></landPlan>
+                </template>
+              </customBack>
             </div>
             <div class="right-charts-item">
-              <subTop title="各地农用地利用面积" :postion="'right'"></subTop>
-              <landareaCharts></landareaCharts>
+              <customBack top-title="各地农用地利用面积" :top-postion="'right'">
+                <template #back>
+                  <landareaCharts></landareaCharts>
+                </template>
+              </customBack>
             </div>
           </el-col>
         </el-row>
@@ -39,12 +59,14 @@
 </template>
 <script setup>
 import baseBg from '@/components/baseBg.vue';
-import subTop from '@/components/subTop.vue';
+import customBack from '@/components/customBack.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 landPlan from './components/landPlan.vue';
+import landPatrol from './components/landPatrol.vue';
 import { reactive } from 'vue';
 </script>
 <style lang="scss" scoped>
diff --git a/sub-government-screen-service/src/views/plant/index.vue b/sub-government-screen-service/src/views/plant/index.vue
index e05566e..73fcbf2 100644
--- a/sub-government-screen-service/src/views/plant/index.vue
+++ b/sub-government-screen-service/src/views/plant/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="data-home-index">
-    <baseBg :name-val="'plant'">
+    <baseBg :name-val="'plant'" top-title="智慧种植管理系统">
       <template #center>
         <el-row style="width: 100%; height: 100%">
           <el-col :span="6" class="left-charts">
@@ -10,9 +10,9 @@
           </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"></div>
+            <div class="right-charts-item"></div>
           </el-col>
         </el-row>
       </template>
@@ -34,7 +34,6 @@ import baseBg from '@/components/baseBg.vue';
   .left-charts-item {
     width: 100%;
     height: calc((100% - 30px) / 3);
-    background: #fff;
   }
 
   .right-charts {
@@ -47,7 +46,6 @@ import baseBg from '@/components/baseBg.vue';
   .right-charts-item {
     width: 100%;
     height: calc((100% - 30px) / 3);
-    background: #fff;
   }
 }
 </style>
diff --git a/sub-government-screen-service/src/views/trace/index.vue b/sub-government-screen-service/src/views/trace/index.vue
index 9099e48..730fc77 100644
--- a/sub-government-screen-service/src/views/trace/index.vue
+++ b/sub-government-screen-service/src/views/trace/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="data-home-index">
-    <baseBg :name-val="'trace'">
+    <baseBg :name-val="'trace'" top-title="全程溯源管理系统">
       <template #center>
         <el-row style="width: 100%; height: 100%">
           <el-col :span="6" class="left-charts">
@@ -10,9 +10,9 @@
           </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"></div>
+            <div class="right-charts-item"></div>
           </el-col>
         </el-row>
       </template>
@@ -34,7 +34,6 @@ import baseBg from '@/components/baseBg.vue';
   .left-charts-item {
     width: 100%;
     height: calc((100% - 30px) / 3);
-    background: #fff;
   }
 
   .right-charts {
@@ -47,7 +46,6 @@ import baseBg from '@/components/baseBg.vue';
   .right-charts-item {
     width: 100%;
     height: calc((100% - 30px) / 3);
-    background: #fff;
   }
 }
 </style>