diff --git a/src/assets/images/business/bg_title.png b/src/assets/images/business/bg_title.png
new file mode 100644
index 0000000..946a461
Binary files /dev/null and b/src/assets/images/business/bg_title.png differ
diff --git a/src/components/custom-echart-water-droplet/index.vue b/src/components/custom-echart-water-droplet/index.vue
index 1a40294..e1082ed 100644
--- a/src/components/custom-echart-water-droplet/index.vue
+++ b/src/components/custom-echart-water-droplet/index.vue
@@ -7,7 +7,7 @@ import { cloneDeep } from 'lodash';
 import { useEcharts } from '@/hooks/useEcharts';
 
 export default {
-  name: 'customEchartWaterDroplet',
+  name: 'CustomEchartWaterDroplet',
   props: {
     chartData: {
       type: Array,
diff --git a/src/views/business/components/businessFour.vue b/src/views/business/components/businessFour.vue
index c467bcf..47abf05 100644
--- a/src/views/business/components/businessFour.vue
+++ b/src/views/business/components/businessFour.vue
@@ -1,78 +1,210 @@
 <template>
   <div class="business">
-    <custom-echart-water-droplet width="100%" height="100%" :option="option" />
+    <div class="business-left">
+      <custom-echart-water-droplet width="100%" height="100%" :option="state.option" />
+      <div class="business-title">证件齐全率</div>
+    </div>
+    <div class="business-right">
+      <div class="business-title">临期预警</div>
+      <ul class="business-info">
+        <li class="success">
+          <b>正常</b>
+          <span>253家</span>
+        </li>
+        <li class="warning">
+          <b>临期</b>
+          <span>5家</span>
+        </li>
+        <li class="danger">
+          <b>已过期</b>
+          <span>0家</span>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
-
 <script setup>
-import { ref } from 'vue';
-let percent = ref(0.6);
-const option = ref({
-  backgroundColor: 'transparent', //背景色
-  series: [
-    {
-      name: '预估量',
-      type: 'liquidFill',
-      radius: '80%',
-      center: ['50%', '50%'],
-      backgroundStyle: {
-        color: 'transparent',
-      },
-      data: [percent.value, percent.value],
-      amplitude: 12, //水波振幅
-      label: {
-        //标签设置
-        position: ['50%', '45%'],
-        formatter: percent.value * 100 + '%', //显示文本,
-        textStyle: {
-          fontSize: '20px', //文本字号,
-          color: '#fff',
+import { reactive, ref, watch } from 'vue';
+import { isEmpty } from '@/utils';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const state = reactive({
+  option: {
+    backgroundColor: 'transparent', //背景色
+    series: [
+      {
+        name: '',
+        type: 'liquidFill',
+        radius: '80%',
+        center: ['50%', '50%'],
+        backgroundStyle: {
+          color: 'transparent',
+        },
+        data: [],
+        amplitude: 12, //水波振幅
+        label: {
+          position: ['50%', '45%'],
+          // formatter: 0.3998 * 100 + '%', //显示文本,
+          textStyle: {
+            fontSize: '20px', //文本字号,
+            color: '#fff',
+          },
+        },
+        outline: {
+          borderDistance: 2,
+          itemStyle: {
+            borderWidth: 2,
+            borderColor: {
+              type: 'linear',
+              x: 1,
+              y: 0,
+              x2: 0,
+              y2: 0,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: 'rgba(71, 202, 219, 0.5)',
+                },
+                {
+                  offset: 0.6,
+                  color: 'rgba(45, 209, 185, 0.5)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(13, 204, 163, 0.5)',
+                },
+              ],
+              globalCoord: false,
+            },
+          },
         },
-      },
-      outline: {
-        borderDistance: 3,
         itemStyle: {
-          borderWidth: 1,
-          borderColor: {
-            type: 'linear',
-            x: 1,
+          color: {
+            type: 'linear', // 线性渐变
+            x: 0,
             y: 0,
             x2: 0,
-            y2: 0,
+            y2: 1,
             colorStops: [
-              {
-                offset: 0,
-                color: 'rgba(255, 255, 255, 0.8)',
-              },
-              {
-                offset: 0.6,
-                color: 'rgba(255, 255, 255, 0.8)',
-              },
-              {
-                offset: 1,
-                color: 'rgba(255, 255, 255, 0.8)',
-              },
+              { offset: 0, color: 'rgba(13, 204, 163, 0.6)' },
+              { offset: 1, color: 'rgba(71, 202, 219, 1)' },
             ],
-            globalCoord: false,
+            global: false, // 默认为 false
           },
         },
       },
-      itemStyle: {
-        color: {
-          type: 'linear', // 线性渐变
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            { offset: 0, color: '#45bfe9' },
-            { offset: 1, color: '#01589c' },
-          ],
-          global: false, // 默认为 false
-        },
-      },
-    },
-  ],
+    ],
+  },
 });
+
+watch(
+  () => props.data,
+  (val) => {
+    if (!isEmpty(val)) {
+      state.option.series[0].data = [0, val.percent];
+      state.option.series[0].label.formatter = val.percent * 100 + '%';
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.business {
+  width: 100%;
+  height: 100%;
+  @include flex-row();
+
+  &-title {
+    width: 160px;
+    margin: 0 auto;
+    height: 32px;
+    line-height: 32px;
+    font-size: 16px;
+    font-weight: 400;
+    text-align: center;
+    color: #ffffff;
+    text-shadow: 2px 0px 10px 0px #01eeff;
+    background: url('@/assets/images/business/bg_title.png');
+    background-repeat: no-repeat;
+    background-size: contain;
+    text-shadow:
+      0 0 10px #01eeff,
+      0 0 20px #01eeff,
+      0 0 30px #01eeff,
+      0 0 40px #01eeff;
+  }
+
+  &-left,
+  &-right {
+    @include flex-column();
+    flex: 1;
+  }
+
+  &-info {
+    width: 100%;
+    @include flex-column();
+    text-align: center;
+
+    li {
+      @include flex-column();
+      font-size: 16px;
+      font-weight: 400;
+      color: #fff;
+      margin-top: 16px;
+
+      b {
+        margin-bottom: 10px;
+
+        &::before {
+          display: inline-block;
+          content: '';
+          width: 12px;
+          height: 12px;
+          border-radius: 6px;
+          margin-right: 10px;
+        }
+      }
+
+      &.success {
+        span {
+          color: #02fd94;
+        }
+        b {
+          &::before {
+            background-color: #02fd94;
+          }
+        }
+      }
+      &.warning {
+        span {
+          color: #fef906;
+        }
+        b {
+          &::before {
+            background-color: #fef906;
+          }
+        }
+      }
+      &.danger {
+        span {
+          color: #fc0003;
+        }
+        b {
+          &::before {
+            background-color: #fc0003;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/business/index.vue b/src/views/business/index.vue
index a61ad23..01f3f02 100644
--- a/src/views/business/index.vue
+++ b/src/views/business/index.vue
@@ -111,18 +111,12 @@ const loadData = async () => {
       { value: 150, name: '2024' },
       { value: 80, name: '2025' },
     ],
-    four: [
-      { value: 58.9, label: '灌溉水田' },
-      { value: 56.1, label: '基地地' },
-      { value: 60.8, label: '望天田' },
-      { value: 60.6, label: '水浇地' },
-      { value: 32.6, label: '林地' },
-      { value: 25.8, label: '育苗地' },
-      { value: 56.0, label: '果园' },
-      { value: 52.4, label: '草地' },
-      { value: 6.3, label: '观测用地' },
-      { value: 6.1, label: '监测用地' },
-    ],
+    four: {
+      percent: 0.3998,
+      success: 253,
+      warning: 5,
+      danger: 0,
+    },
     five: [
       { name: '耿马镇', value: 87.84 },
       { name: '勐撒镇', value: 60.7 },