diff --git a/src/assets/images/inputs/1.png b/src/assets/images/inputs/1.png
new file mode 100644
index 0000000..40b5029
Binary files /dev/null and b/src/assets/images/inputs/1.png differ
diff --git a/src/assets/images/inputs/2.png b/src/assets/images/inputs/2.png
new file mode 100644
index 0000000..e574c33
Binary files /dev/null and b/src/assets/images/inputs/2.png differ
diff --git a/src/assets/images/inputs/3.png b/src/assets/images/inputs/3.png
new file mode 100644
index 0000000..a84c7a4
Binary files /dev/null and b/src/assets/images/inputs/3.png differ
diff --git a/src/assets/images/inputs/4.png b/src/assets/images/inputs/4.png
new file mode 100644
index 0000000..c004d15
Binary files /dev/null and b/src/assets/images/inputs/4.png differ
diff --git a/src/assets/images/inputs/5.png b/src/assets/images/inputs/5.png
new file mode 100644
index 0000000..d8081c9
Binary files /dev/null and b/src/assets/images/inputs/5.png differ
diff --git a/src/assets/images/inputs/6.png b/src/assets/images/inputs/6.png
new file mode 100644
index 0000000..eaa725e
Binary files /dev/null and b/src/assets/images/inputs/6.png differ
diff --git a/src/assets/images/inputs/bg_label.png b/src/assets/images/inputs/bg_label.png
new file mode 100644
index 0000000..47d29b8
Binary files /dev/null and b/src/assets/images/inputs/bg_label.png differ
diff --git a/src/assets/images/inputs/bg_title.png b/src/assets/images/inputs/bg_title.png
new file mode 100644
index 0000000..946a461
Binary files /dev/null and b/src/assets/images/inputs/bg_title.png differ
diff --git a/src/assets/images/inputs/bg_value.png b/src/assets/images/inputs/bg_value.png
new file mode 100644
index 0000000..5c61e1c
Binary files /dev/null and b/src/assets/images/inputs/bg_value.png differ
diff --git a/src/assets/images/inputs/partbg1.png b/src/assets/images/inputs/partbg1.png
deleted file mode 100644
index 98ea6bd..0000000
Binary files a/src/assets/images/inputs/partbg1.png and /dev/null differ
diff --git a/src/assets/images/inputs/partbg2.png b/src/assets/images/inputs/partbg2.png
deleted file mode 100644
index 2ef3ba7..0000000
Binary files a/src/assets/images/inputs/partbg2.png and /dev/null differ
diff --git a/src/assets/images/inputs/partbg3.png b/src/assets/images/inputs/partbg3.png
deleted file mode 100644
index 9361746..0000000
Binary files a/src/assets/images/inputs/partbg3.png and /dev/null differ
diff --git a/src/components/custom-echart-maps/index.vue b/src/components/custom-echart-maps/index.vue
index 04e8e58..8649598 100644
--- a/src/components/custom-echart-maps/index.vue
+++ b/src/components/custom-echart-maps/index.vue
@@ -68,10 +68,8 @@ export default {
       }
       setOptions(option);
 
-      onMapClick(({ name, data }) => {
-        console.info('onMapClick点击区域:', name);
-        console.info('onMapClick关联数据:', data);
-        emit('click', { name, data });
+      onMapClick((data) => {
+        emit('click', data);
       });
       startAutoPlay({
         interval: 2000,
diff --git a/src/components/custom-echart-pie-3d/index.vue b/src/components/custom-echart-pie-3d/index.vue
index 48bf218..6c46cdf 100644
--- a/src/components/custom-echart-pie-3d/index.vue
+++ b/src/components/custom-echart-pie-3d/index.vue
@@ -33,7 +33,7 @@ export default {
   emits: ['click'],
   setup(props, { emit }) {
     const chartRef = ref(null);
-    const { setOptions, getInstance, resize } = useEcharts(chartRef);
+    const { setOptions, getInstance, resize, onMapClick } = useEcharts(chartRef);
     const option = reactive({
       series: [],
     });
@@ -59,8 +59,11 @@ export default {
       option.series = props.chartData;
       setOptions(option);
       resize();
-      getInstance()?.off('click', onClick);
-      getInstance()?.on('click', onClick);
+      onMapClick((data) => {
+        emit('click', data);
+      });
+      // getInstance()?.off('click', onClick);
+      // getInstance()?.on('click', onClick);
     }
 
     function onClick(params) {
diff --git a/src/components/custom-scroll-board/index.vue b/src/components/custom-scroll-board/index.vue
index e85cb37..28ef7d1 100644
--- a/src/components/custom-scroll-board/index.vue
+++ b/src/components/custom-scroll-board/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="dv-scroll-board">
-    <div v-if="status.header.length && status.mergedConfig" class="header" :style="`background-color: ${status.mergedConfig.headerBGC};`">
+    <div v-if="status.header.length && status.mergedConfig" class="header" :style="`background: ${status.mergedConfig.headerBGC};`">
       <div
         v-for="(headerItem, i) in status.header"
         :key="`${headerItem}${i}`"
@@ -23,7 +23,7 @@
         :style="`
         height: ${status.heights[ri]}px;
         line-height: ${status.heights[ri]}px;
-        background-color: ${status.mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']};
+        background: ${status.mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']};
       `"
       >
         <div
diff --git a/src/hooks/useEcharts.js b/src/hooks/useEcharts.js
index e327a32..24194a5 100644
--- a/src/hooks/useEcharts.js
+++ b/src/hooks/useEcharts.js
@@ -111,21 +111,11 @@ export const useEcharts = (elRef, theme = 'default') => {
 
   function handleMapClick(params) {
     console.info('handleMapClick', params);
-    // 过滤非地图区域的点击事件
-    if (params.seriesType === 'map3D' || params.seriesType === 'map') {
-      // 获取点击区域信息
-      const mapName = params.name;
-      const regionData = params.data || {};
-      console.info('seriesType', params.seriesType);
-      // 执行注册的回调函数
-      if (typeof mapClickHandler === 'function') {
-        mapClickHandler({
-          name: mapName,
-          data: regionData,
-          coordinates: params.event?.event?.point,
-          // originalParams: params
-        });
-      }
+
+    // 执行注册的回调函数
+    if (typeof mapClickHandler === 'function') {
+      console.info('mapClickHandler', params);
+      mapClickHandler(params);
     }
   }
 
diff --git a/src/styles/common/define.scss b/src/styles/common/define.scss
index 7ff994e..4f25271 100644
--- a/src/styles/common/define.scss
+++ b/src/styles/common/define.scss
@@ -8,3 +8,7 @@
     flex-direction: column;
   }
 }
+
+.custom-echarts-tips {
+  color: #fff;
+}
diff --git a/src/views/inputs/components/casesAlerts.vue b/src/views/inputs/components/casesAlerts.vue
deleted file mode 100644
index 3e0a192..0000000
--- a/src/views/inputs/components/casesAlerts.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
-  <div class="cases-alerts-warp">
-    <div class="cases-alerts" :style="{ 'background-image': 'url(' + getAssetsFile('images/inputs/partbg1.png') + ')' }">
-      <div class="cases-alerts-content">
-        <div class="cases-alerts-item-pos">
-          <template v-for="(n, index) in datalist" :key="index">
-            <div class="cases-alerts-item">
-              <div class="header" :style="{ 'background-image': 'url(' + getAssetsFile('images/inputs/partbg2.png') + ')' }">
-                <div class="title">{{ n.title }}</div>
-              </div>
-              <div class="content">
-                <template v-for="(m, mindex) in n.valStr" :key="mindex">
-                  <div class="content-item" :style="{ 'background-image': 'url(' + getAssetsFile('images/inputs/partbg3.png') + ')' }">
-                    <div class="num">{{ m }}</div>
-                  </div>
-                </template>
-              </div>
-            </div>
-          </template>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-import { ref, reactive, onMounted } from 'vue';
-import { isEmpty, getAssetsFile } from '@/utils';
-const datalist = reactive([
-  { title: '案件次数', val: 100 },
-  { title: '预警次数', val: 236 },
-]);
-
-onMounted(() => {
-  if (datalist.length && datalist.length > 0) {
-    datalist.forEach((m) => {
-      let valStr = '';
-
-      if (m.val < 1000 && m.val >= 100) {
-        valStr = '0' + m.val;
-      } else if (m.val < 100 && m.val >= 10) {
-        valStr = '00' + m.val;
-      } else if (m.val < 10) {
-        valStr = '000' + m.val;
-      } else {
-        valStr = m.val.toFixed(0);
-      }
-      m.valStr = [...valStr];
-      // console.info('valStr', m.valStr);
-    });
-  }
-});
-</script>
-<style lang="scss" scoped>
-div {
-  box-sizing: border-box;
-}
-.cases-alerts-warp {
-  height: 100%;
-  padding: 8px;
-  .cases-alerts {
-    width: 100%;
-    height: 100%;
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    .cases-alerts-content {
-      width: 100%;
-      height: 100%;
-      padding: 0 20px;
-      display: inline-flex;
-      justify-content: center;
-      flex-direction: column;
-      .cases-alerts-item-pos {
-        width: 100%;
-        display: inline-flex;
-        justify-content: space-around;
-      }
-      .cases-alerts-item {
-        display: inline-block;
-        width: calc((100% - 20px) / 2);
-        .header,
-        .content {
-          display: inline-flex;
-          width: 100%;
-        }
-        .header {
-          background-size: 100% 100%;
-          background-repeat: no-repeat;
-          line-height: 32px;
-          height: 32px;
-          display: inline-block;
-          width: 100%;
-          .title {
-            text-align: center;
-            font-size: 16px;
-            font-weight: bold;
-            transform: skewX(-8deg);
-            background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
-            -webkit-background-clip: text;
-            color: #fff;
-            letter-spacing: 8px;
-            text-shadow: -6px 0 0 1px #add8f1;
-          }
-        }
-        .content {
-          justify-content: space-around;
-          margin-top: 30%;
-          .content-item {
-            height: 36px;
-            display: inline-block;
-            width: calc((100% - 20px) / 4);
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            line-height: 36px;
-            text-align: center;
-            .num {
-              text-align: center;
-              font-size: 20px;
-              font-weight: bold;
-              transform: skewX(-8deg);
-              background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
-              -webkit-background-clip: text;
-              color: #fff;
-              text-shadow: -6px 0 0 1px #add8f1;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/views/inputs/components/dealerDistributionCharts.vue b/src/views/inputs/components/dealerDistributionCharts.vue
deleted file mode 100644
index 677146c..0000000
--- a/src/views/inputs/components/dealerDistributionCharts.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<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/src/views/inputs/components/inputsFive.vue b/src/views/inputs/components/inputsFive.vue
new file mode 100644
index 0000000..0d4b703
--- /dev/null
+++ b/src/views/inputs/components/inputsFive.vue
@@ -0,0 +1,76 @@
+<template>
+  <custom-echart-line ref="lineCharts" :chart-data="state.data" height="100%" :option="state.option" />
+</template>
+<script setup>
+import { reactive, ref } from 'vue';
+let dataList = [
+  { value: 10, name: '2020' },
+  { value: 66, name: '2021' },
+  { value: 100, name: '2022' },
+  { value: 120, name: '2023' },
+  { value: 150, name: '2024' },
+  { value: 80, name: '2025' },
+];
+const state = reactive({
+  option: {
+    color: ['#35D0C0'],
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '5%',
+      top: '10%',
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      formatter: (data) => {
+        const params = data[0];
+        let str = `<div class="custom-echarts-tips">
+          <span>${params.name}</span><br/>
+          <span>${params.marker} ${params.data} 万元</span>
+        </div>`;
+        return str;
+      },
+    },
+    xAxis: {
+      type: 'category',
+      // name: '年份',
+      axisTick: {
+        show: false,
+        alignWithLabel: false,
+        interval: 'auto',
+        inside: false,
+        length: 5,
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+          color: 'rgba(28, 158, 222, 1)',
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      // name: '',
+    },
+  },
+  data: dataList,
+});
+const lineCharts = ref(null);
+const refresData = () => {
+  state.data = [
+    { value: 5, name: '2020' },
+    { value: 36, name: '2021' },
+    { value: 70, name: '2022' },
+    { value: 56, name: '2023' },
+    { value: 70, name: '2024' },
+    { value: 20, name: '2025' },
+  ];
+};
+
+defineExpose({
+  refresData,
+});
+</script>
diff --git a/src/views/inputs/components/inputsFour.vue b/src/views/inputs/components/inputsFour.vue
new file mode 100644
index 0000000..fd14f3a
--- /dev/null
+++ b/src/views/inputs/components/inputsFour.vue
@@ -0,0 +1,284 @@
+<template>
+  <custom-echart-pie-3d :chart-data="state.data" height="100%" :option="state.option" @click="handleClick" />
+</template>
+<script setup>
+import { reactive, ref, onMounted, computed } from 'vue';
+
+const state = reactive({
+  option: {},
+  data: [],
+  text: '',
+});
+
+const currentText = computed(() => state.text);
+
+const pieData = [
+  { value: 530, name: '种源企业', itemStyle: { color: '#8fd7fce8' } },
+  { value: 1215, name: '肥料厂家', itemStyle: { color: '#466BE7e8' } },
+  { value: 2312, name: '农药厂家', itemStyle: { color: '#F4BB29e8' } },
+  { value: 916, name: '其他', itemStyle: { color: '#FF8329' } },
+];
+
+// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+  // 计算
+  let midRatio = (startRatio + endRatio) / 2;
+  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.05 : 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) * h * 0.1;
+      }
+      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+    },
+  };
+}
+
+function fomatFloat(num, n) {
+  var f = parseFloat(num);
+  if (isNaN(f)) {
+    return false;
+  }
+  f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
+  var s = f.toString();
+  var rs = s.indexOf('.');
+  if (rs < 0) {
+    rs = s.length;
+    s += '.';
+  }
+  while (s.length <= rs + n) {
+    s += '0';
+  }
+  return s;
+}
+
+// 获取3d丙图的最高扇区的高度
+function getHeight3D(series, height) {
+  series.sort((a, b) => {
+    return b.pieData.value - a.pieData.value;
+  });
+  return (height * 20) / series[0].pieData.value;
+}
+
+// 获取配置项
+function getPie3D(pieData, internalDiameterRatio) {
+  let series = [];
+  let sumValue = 0;
+  let startValue = 0;
+  let endValue = 0;
+  let legendData = [];
+  let legendBfb = [];
+  let k = 1 - internalDiameterRatio;
+  pieData.sort((a, b) => {
+    return b.value - a.value;
+  });
+  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,
+      },
+
+      //设置饼图在容器中的位置(目前没发现啥用)
+      //   center: ['50%', '100%']
+    };
+
+    //曲面的颜色、不透明度等样式。
+    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);
+  }
+
+  legendData = [];
+  legendBfb = [];
+  for (let i = 0; i < series.length; i++) {
+    endValue = startValue + series[i].pieData.value * 1;
+    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;
+    let bfb = fomatFloat(series[i].pieData.value / sumValue, 4);
+    legendData.push({
+      name: series[i].name,
+      value: bfb,
+    });
+    legendBfb.push({
+      name: series[i].name,
+      value: bfb,
+    });
+  }
+
+  let boxHeight = getHeight3D(series, 15);
+  let option = {
+    legend: {
+      data: legendData,
+      color: ['#8FD7FC', '#466BE7', '#F4BB29', '#49C384', '#8FD7FC', '#466BE7', '#F4BB29', '#49C384'],
+      bottom: 10,
+      itemGap: 20,
+      show: true,
+      icon: 'rect',
+      itemHeight: 10,
+      itemWidth: 10,
+      textStyle: {
+        fontSize: 12,
+        color: '#B8DDFF',
+        lineHeight: 20,
+      },
+      // formatter: function (name) {
+      //   var target;
+      //   for (var i = 0, l = pieData.length; i < l; i++) {
+      //     if (pieData[i].name == name) {
+      //       target = pieData[i].value;
+      //     }
+      //   }
+      //   return `${name}   ${target}`;
+      // },
+    },
+    // title: {
+    //   text: `{a|45%}{c|\n肥料厂家}`,
+    //   x: 'center',
+    //   y: 'center',
+    //   textStyle: {
+    //     rich: {
+    //       a: {
+    //         fontSize: 20,
+    //         color: '#fff',
+    //       },
+    //       c: {
+    //         fontSize: 12,
+    //         color: '#fff',
+    //         padding: [15, 0],
+    //       },
+    //     },
+    //   },
+    // },
+    tooltip: {
+      show: false,
+      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      borderColor: 'transparent',
+      formatter: (params) => {
+        if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+          let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) * 100).toFixed(2);
+          const value = option.series[params.seriesIndex].pieData.value;
+          return (
+            `<div style='color:rgba(214, 243, 255, 0.9);'>` +
+            `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+            `${params.seriesName}<br/>` +
+            `<span style='margin-right:20px'>${value}</span>` +
+            `<span >${bfb}%</span>` +
+            `</div>`
+          );
+        }
+      },
+    },
+    xAxis3D: {
+      min: -1,
+      max: 1,
+    },
+    yAxis3D: {
+      min: -1,
+      max: 1,
+    },
+    zAxis3D: {
+      min: -1,
+      max: 1,
+    },
+    grid3D: {
+      show: false,
+      boxHeight: boxHeight,
+      left: 0,
+      top: -30,
+      viewControl: {
+        alpha: 45, //角度(这个很重要 调节角度的)
+        distance: 150, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+        rotateSensitivity: 1, //设置为0无法旋转
+        zoomSensitivity: 1, //设置为0无法缩放
+        panSensitivity: 0, //设置为0无法平移
+        autoRotate: true, //自动旋转
+      },
+    },
+    series: series,
+  };
+  return option;
+}
+
+const handleClick = (params) => {
+  console.log(270, params);
+  // state.text = `{a|${params.dataIndex}%}{c|\n${params.seriesName}}`;
+  // currentText.value =
+};
+
+onMounted(() => {
+  const option = getPie3D(pieData, 0.8);
+  state.option = option;
+  state.data = option.series;
+});
+</script>
diff --git a/src/views/inputs/components/inputsGmp.vue b/src/views/inputs/components/inputsGmp.vue
deleted file mode 100644
index 9d56453..0000000
--- a/src/views/inputs/components/inputsGmp.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<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/src/views/inputs/components/inputsMap.vue b/src/views/inputs/components/inputsMap.vue
index 2e5a21c..39c140a 100644
--- a/src/views/inputs/components/inputsMap.vue
+++ b/src/views/inputs/components/inputsMap.vue
@@ -1,5 +1,5 @@
 <template>
-  <centerMap :dialog-title="'土地类型'" @mapclick="doMapclick">
+  <centerMap :dialog-title="'投入品'" @mapclick="doMapclick">
     <template #header>
       <div class="land-map-pop-header">
         <div class="title">{{ currentRegion && currentRegion.name ? currentRegion.name : '投入品' }}</div>
@@ -18,9 +18,8 @@
   </centerMap>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import { ref, reactive } from 'vue';
-import centerMap from '@/components/centerMap.vue';
 
 const unit = ref('家');
 const list = reactive([
@@ -32,9 +31,9 @@ const list = reactive([
   { title: '投入品规模', value: '3000', color: '#FC0003', unit: '万元' },
 ]);
 
-let currentRegion = reactive(null);
+let currentRegion = ref(null);
 const doMapclick = (data) => {
-  currentRegion = data;
+  currentRegion.value = data;
 };
 </script>
 
diff --git a/src/views/inputs/components/inputsOne.vue b/src/views/inputs/components/inputsOne.vue
new file mode 100644
index 0000000..9fba752
--- /dev/null
+++ b/src/views/inputs/components/inputsOne.vue
@@ -0,0 +1,90 @@
+<template>
+  <el-row :gutter="20">
+    <el-col v-for="item in state.list" :key="item.label" :span="12">
+      <div class="inputs-item flex-row">
+        <span class="inputs-item-icon">
+          <img :src="item.icon" />
+        </span>
+        <div class="inputs-item-info flex-column">
+          <b>{{ item.label }}</b>
+          <div class="inputs-item-value flex-row">
+            <em>{{ item.value }}</em>
+            <span>{{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+    </el-col>
+  </el-row>
+</template>
+<script setup>
+import { reactive } from 'vue';
+import { getAssetsFile } from '@/utils';
+
+const state = reactive({
+  list: [
+    {
+      label: '监管机构',
+      value: 88,
+      unit: '家',
+      icon: getAssetsFile('images/inputs/1.png'),
+    },
+    {
+      label: '监管人员',
+      value: 106,
+      unit: '人',
+      icon: getAssetsFile('images/inputs/2.png'),
+    },
+    {
+      label: '村级监管员',
+      value: 38,
+      unit: '人',
+      icon: getAssetsFile('images/inputs/3.png'),
+    },
+    {
+      label: '农资经营单位',
+      value: 27,
+      unit: '家',
+      icon: getAssetsFile('images/inputs/4.png'),
+    },
+    {
+      label: '生产主体',
+      value: 154,
+      unit: '家',
+      icon: getAssetsFile('images/inputs/5.png'),
+    },
+    {
+      label: '检测机构',
+      value: 16,
+      unit: '家',
+      icon: getAssetsFile('images/inputs/6.png'),
+    },
+  ],
+});
+</script>
+<style lang="scss" scoped>
+.inputs {
+  &-item {
+    align-items: center;
+    color: #fff;
+    padding: 10px 0;
+
+    &-icon {
+      margin-right: 16px;
+    }
+
+    &-info {
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    &-value {
+      margin-top: 10px;
+      justify-content: space-between;
+      em {
+        color: #02fd94;
+        font-style: normal;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/inputs/components/inputsSix.vue b/src/views/inputs/components/inputsSix.vue
new file mode 100644
index 0000000..37055bf
--- /dev/null
+++ b/src/views/inputs/components/inputsSix.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="board">
+    <custom-scroll-board :chart-config="options" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const header = ['白名单企业', '产品名称', '黑名单企业', '产品名称'];
+const len = header.length;
+const options = ref({
+  attr: { w: 200, h: 240 },
+  option: {
+    header,
+    dataset: [
+      ['富农种源', '京科824', '南方农业', '京科824'],
+      ['富农种源', '京科824', '南方农业', '京科824'],
+      ['富农种源', '京科824', '南方农业', '京科824'],
+      ['富农种源', '京科824', '南方农业', '京科824'],
+      ['富农种源', '京科824', '南方农业', '京科824'],
+      ['富农种源', '京科824', '南方农业', '京科824'],
+      ['富农种源', '京科824', '南方农业', '京科824'],
+    ],
+    index: false,
+    columnWidth: [100, 100, 100, 100],
+    align: new Array(len).fill('center'),
+    rowNum: 5,
+    waitTime: 5,
+    headerHeight: 40,
+    carousel: 'single',
+    headerBGC: 'rgba(53, 208, 192, 0.4)',
+    oddRowBGC: 'rgba(0, 59, 81, 0.1)',
+    evenRowBGC: 'rgba(10, 39, 50, 0.1)',
+  },
+});
+</script>
+<style scoped lang="scss">
+.board {
+  padding: 10px 0px;
+
+  &:deep(.row-item) {
+    font-size: 16px;
+
+    .ceil {
+      &:nth-child(3),
+      &:nth-child(4) {
+        color: $color-danger;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/inputs/components/inputsThere.vue b/src/views/inputs/components/inputsThere.vue
new file mode 100644
index 0000000..a24a715
--- /dev/null
+++ b/src/views/inputs/components/inputsThere.vue
@@ -0,0 +1,79 @@
+<template>
+  <custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
+</template>
+<script setup>
+import { reactive } from 'vue';
+
+const state = reactive({
+  option: {
+    grid: {
+      left: '5%',
+      right: '5%',
+      bottom: '5%',
+      top: '10%',
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      borderColor: '#35d0c0',
+      formatter: (data) => {
+        const params = data[0];
+        let str = `<div class="custom-echarts-tips">
+          <span>${params.name}</span><br/>
+          <span>${params.marker} ${params.data} 万元</span>
+        </div>`;
+        return str;
+      },
+    },
+    barStyle: {
+      barWidth: 15,
+      itemStyle: {
+        borderRadius: [8, 8, 0, 0],
+      },
+      color: {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          { offset: 0, color: '#35D0C0' },
+          { offset: 1, color: '#35D0C0' },
+        ],
+        global: false,
+      },
+    },
+    xAxis: {
+      type: 'category',
+      // name: '面积',
+      axisTick: {
+        show: false,
+        alignWithLabel: false,
+        interval: 'auto',
+        inside: false,
+        length: 5,
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+          color: 'rgba(28, 158, 222, 1)',
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      // name: '面积(万亩)',
+    },
+  },
+  data: [
+    { value: 530, name: '种子' },
+    { value: 1215, name: '化肥' },
+    { value: 2312, name: '农药' },
+    { value: 916, name: '地膜' },
+    { value: 108, name: '水' },
+  ],
+});
+</script>
diff --git a/src/views/inputs/components/inputsTwo.vue b/src/views/inputs/components/inputsTwo.vue
new file mode 100644
index 0000000..0be8588
--- /dev/null
+++ b/src/views/inputs/components/inputsTwo.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="inputs">
+    <h2 class="inputs-title">检测批次：15684次</h2>
+    <el-row>
+      <el-col v-for="item in state.list" :key="item.label" :span="12">
+        <div class="inputs-item flex-column">
+          <div class="inputs-item-value">{{ item.value }}</div>
+          <div class="inputs-item-label">{{ item.label }}</div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+<script setup>
+import { reactive } from 'vue';
+
+const state = reactive({
+  list: [
+    {
+      label: '检测合格率',
+      value: '98.99%',
+    },
+    {
+      label: '检测覆盖率',
+      value: '99.98%',
+    },
+  ],
+});
+</script>
+<style lang="scss" scoped>
+.inputs {
+  &-title {
+    width: 240px;
+    height: 40px;
+    line-height: 40px;
+    margin: 24px auto 0;
+    background-image: url('@/assets/images/inputs/bg_title.png');
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    font-size: 20px;
+    color: #fff;
+    text-align: center;
+    text-shadow:
+      0 0 10px #01eeff,
+      0 0 20px #01eeff,
+      0 0 30px #01eeff,
+      0 0 40px #01eeff;
+  }
+  &-item {
+    &-label {
+      width: 120px;
+      height: 24px;
+      line-height: 24px;
+      margin: 0 auto 0;
+      background: url('@/assets/images/inputs/bg_label.png') center center no-repeat;
+      background-size: 100%;
+      font-size: 16px;
+      color: #fff;
+      text-align: center;
+      text-shadow:
+        0 0 10px #01eeff,
+        0 0 20px #01eeff,
+        0 0 30px #01eeff,
+        0 0 40px #01eeff;
+    }
+
+    &-value {
+      width: 160px;
+      height: 160px;
+      line-height: 180px;
+      text-align: center;
+      margin: 0 auto;
+      background-image: url('@/assets/images/inputs/bg_value.png');
+      background-size: 100%;
+      background-repeat: no-repeat;
+      font-size: 20px;
+      font-weight: 700;
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/inputs/components/inputsType.vue b/src/views/inputs/components/inputsType.vue
deleted file mode 100644
index 4e2a1b6..0000000
--- a/src/views/inputs/components/inputsType.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<template>
-  <div class="demo roll-list-land-plan" style="height: 100%" ref="refroll">
-    <!-- <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="datalist">
-      <div v-for="(item, index) in datalist" :key="index" class="list-item">
-        <div class="list-item-content">
-          <div class="list-item-boday item-warp" :style="{ flex: listKeys.length }">
-            <div class="item-content">
-              <div class="label">{{ item.title }}</div>
-              <customProgress height="10px" :percent="item.percent"></customProgress>
-            </div>
-          </div>
-        </div>
-      </div>
-    </vue3ScrollSeamless>
-  </div>
-  <!-- </div> -->
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
-import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
-import customProgress from '@/components/customProgress.vue';
-const props = defineProps({
-  //   items: {
-  //     type: Array,
-  //     default: () => [],
-  //   },
-});
-
-let list = reactive([
-  { title: '农药', value: 357 },
-  { title: '肥料', value: 159 },
-  { title: '种源', value: 516 },
-  { title: '兽药', value: 82 },
-  { title: '农机', value: 45 },
-]);
-
-let refroll = ref(null);
-
-let datalist = computed(() => {
-  let maxwidth = refroll.value && refroll.value.clientWidth;
-  return list.map((m) => {
-    return {
-      ...m,
-      percent: Number((Number(parseInt(m.value) / max.value) * 100).toFixed(0)),
-      pwidth: parseInt(Number(parseInt(m.value) / max.value) * maxwidth),
-    };
-  });
-});
-
-let max = computed(() => {
-  let valueList = new Set(list.map((item) => item.value));
-  let sortValue = [...valueList].sort((a, b) => b - a) || [];
-  // console.info('valueList', sortValue);
-  return sortValue.length ? sortValue[0] : 0;
-});
-
-const listKeys = reactive(['title', 'value']);
-const listKeysHeader = reactive({
-  title: '分类',
-  value: '数量',
-});
-
-const classOptions = {
-  singleHeight: 48,
-};
-onMounted(() => {});
-</script>
-
-<style scoped lang="scss">
-.roll-list-land-plan {
-  margin-top: 8px;
-  ::v-deep() {
-    .el-progress-bar__outer {
-      background: transparent;
-    }
-  }
-  .scroll-wrap {
-    height: 90%;
-    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: #6beff9 !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;
-    }
-    .item-content {
-      width: 100%;
-      display: inline-flex;
-      justify-content: flex-start;
-      margin: 8px 0;
-      .label,
-      .val {
-        display: inline-block;
-        vertical-align: middle;
-      }
-      .label {
-        width: 50px;
-        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/src/views/inputs/components/landbreedCharts.vue b/src/views/inputs/components/landbreedCharts.vue
deleted file mode 100644
index 3197923..0000000
--- a/src/views/inputs/components/landbreedCharts.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<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: #6beff9 !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/src/views/inputs/components/monthlyuseCharts.vue b/src/views/inputs/components/monthlyuseCharts.vue
deleted file mode 100644
index 667b7dc..0000000
--- a/src/views/inputs/components/monthlyuseCharts.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<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/src/views/inputs/index.vue b/src/views/inputs/index.vue
index e12fe0e..c40ea1f 100644
--- a/src/views/inputs/index.vue
+++ b/src/views/inputs/index.vue
@@ -4,21 +4,21 @@
       <div class="left-charts-item">
         <customBack top-title="投入品监管体系建设" :top-postion="'left'">
           <template #back>
-            <inputsType></inputsType>
+            <inputsOne />
           </template>
         </customBack>
       </div>
       <div class="left-charts-item">
         <customBack top-title="投入品检测监管" :top-postion="'left'">
           <template #back>
-            <inputsGmp></inputsGmp>
+            <inputsTwo />
           </template>
         </customBack>
       </div>
       <div class="left-charts-item">
-        <customBack top-title="农资监管" :top-postion="'left'">
+        <customBack top-title="投入品金额对比" :top-postion="'left'">
           <template #back>
-            <landbreedCharts></landbreedCharts>
+            <inputsThere />
           </template>
         </customBack>
       </div>
@@ -30,21 +30,41 @@
       <div class="right-charts-item">
         <customBack top-title="生产主体统计" :top-postion="'right'">
           <template #back>
-            <casesAlerts></casesAlerts>
+            <inputsFour />
           </template>
         </customBack>
       </div>
       <div class="right-charts-item">
-        <customBack top-title="历年投入品规模对比" :top-postion="'right'">
+        <customBack
+          top-title="历年投入品规模对比"
+          :top-postion="'right'"
+          :down-title="'全县'"
+          :label-field="'label'"
+          :value-field="'value'"
+          :down-width="'100px'"
+          :options="[
+            { label: '全县', value: '530926' },
+            { label: '耿马镇', value: '42611' },
+            { label: '勐撒镇', value: '9259' },
+            { label: '勐永镇', value: '17787' },
+            { label: '孟定镇', value: '42610' },
+            { label: '勐简乡', value: '17788' },
+            { label: '贺派乡', value: '40161' },
+            { label: '四排山乡', value: '40163' },
+            { label: '大兴乡', value: '40159' },
+          ]"
+          :is-down="true"
+          @command="handleCommand"
+        >
           <template #back>
-            <monthlyuseCharts></monthlyuseCharts>
+            <!-- <inputsFive ref="fiveRef" /> -->
           </template>
         </customBack>
       </div>
       <div class="right-charts-item">
         <customBack top-title="投入品白名单/黑名单" :top-postion="'right'">
           <template #back>
-            <dealerDistributionCharts></dealerDistributionCharts>
+            <!-- <inputsSix /> -->
           </template>
         </customBack>
       </div>
@@ -52,14 +72,22 @@
   </el-row>
 </template>
 <script setup>
-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';
-import casesAlerts from './components/casesAlerts.vue';
-import inputsType from './components/inputsType.vue';
+import inputsOne from './components/inputsOne.vue';
+import inputsTwo from './components/inputsTwo.vue';
+import inputsThere from './components/inputsThere.vue';
+import inputsFour from './components/inputsFour.vue';
+import inputsFive from './components/inputsFive.vue';
+import inputsSix from './components/inputsSix.vue';
 import inputsMap from './components/inputsMap.vue';
+import { nextTick, ref } from 'vue';
+
+const fiveRef = ref(null);
+const handleCommand = (data) => {
+  console.info('data=', data);
+  nextTick(() => {
+    fiveRef.value && fiveRef.value.refresData();
+  });
+};
 </script>
 <style lang="scss" scoped>
 .data-home-index {
diff --git a/src/views/land/components/distributionCharts.vue b/src/views/land/components/distributionCharts.vue
index b4cb3dd..58f98fa 100644
--- a/src/views/land/components/distributionCharts.vue
+++ b/src/views/land/components/distributionCharts.vue
@@ -18,6 +18,8 @@ const state = reactive({
       axisPointer: {
         type: 'shadow',
       },
+      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      borderColor: '#35d0c0',
       formatter: (data) => {
         const params = data[0];
         let str = `<div class="custom-echarts-tips">
diff --git a/src/views/land/components/landCirculation.vue b/src/views/land/components/landCirculation.vue
index ea7b307..d293232 100644
--- a/src/views/land/components/landCirculation.vue
+++ b/src/views/land/components/landCirculation.vue
@@ -55,6 +55,10 @@ const options = ref({
       font-family: 'DingTalk JinBuTi, DingTalk JinBuTi-Regular';
       font-weight: 700;
     }
+
+    .inside-column {
+      border-radius: 8px;
+    }
   }
 
   &:deep(.row-item-1) {
diff --git a/src/views/land/components/landPatrol.vue b/src/views/land/components/landPatrol.vue
index 0d4b703..ea7c0c9 100644
--- a/src/views/land/components/landPatrol.vue
+++ b/src/views/land/components/landPatrol.vue
@@ -26,6 +26,8 @@ const state = reactive({
       axisPointer: {
         type: 'shadow',
       },
+      backgroundColor: 'rgba(18, 55, 85, 0.8);',
+      borderColor: '#35d0c0',
       formatter: (data) => {
         const params = data[0];
         let str = `<div class="custom-echarts-tips">