feat:busniness

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,

src/views/business/components/businessFour.vue

@@ -1,38 +1,65 @@
 <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';
+import { reactive, ref, watch } from 'vue';
-let percent = ref(0.6);
+import { isEmpty } from '@/utils';
-const option = ref({
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const state = reactive({
+  option: {
     backgroundColor: 'transparent', //背景色
     series: [
       {
-      name: '预估量',
+        name: '',
         type: 'liquidFill',
         radius: '80%',
         center: ['50%', '50%'],
         backgroundStyle: {
           color: 'transparent',
         },
-      data: [percent.value, percent.value],
+        data: [],
         amplitude: 12, //水波振幅
         label: {
-        //标签设置
           position: ['50%', '45%'],
-        formatter: percent.value * 100 + '%', //显示文本,
+          // formatter: 0.3998 * 100 + '%', //显示文本,
           textStyle: {
             fontSize: '20px', //文本字号,
             color: '#fff',
           },
         },
         outline: {
-        borderDistance: 3,
+          borderDistance: 2,
           itemStyle: {
-          borderWidth: 1,
+            borderWidth: 2,
             borderColor: {
               type: 'linear',
               x: 1,
@@ -42,15 +69,15 @@ const option = ref({
               colorStops: [
                 {
                   offset: 0,
-                color: 'rgba(255, 255, 255, 0.8)',
+                  color: 'rgba(71, 202, 219, 0.5)',
                 },
                 {
                   offset: 0.6,
-                color: 'rgba(255, 255, 255, 0.8)',
+                  color: 'rgba(45, 209, 185, 0.5)',
                 },
                 {
                   offset: 1,
-                color: 'rgba(255, 255, 255, 0.8)',
+                  color: 'rgba(13, 204, 163, 0.5)',
                 },
               ],
               globalCoord: false,
@@ -65,14 +92,119 @@ const option = ref({
             x2: 0,
             y2: 1,
             colorStops: [
-            { offset: 0, color: '#45bfe9' },
+              { offset: 0, color: 'rgba(13, 204, 163, 0.6)' },
-            { offset: 1, color: '#01589c' },
+              { offset: 1, color: 'rgba(71, 202, 219, 1)' },
             ],
             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>

src/views/business/index.vue

@@ -111,18 +111,12 @@ const loadData = async () => {
       { value: 150, name: '2024' },
       { value: 80, name: '2025' },
     ],
-    four: [
+    four: {
-      { value: 58.9, label: '灌溉水田' },
+      percent: 0.3998,
-      { value: 56.1, label: '基地地' },
+      success: 253,
-      { value: 60.8, label: '望天田' },
+      warning: 5,
-      { value: 60.6, label: '水浇地' },
+      danger: 0,
-      { value: 32.6, label: '林地' },
+    },
-      { value: 25.8, label: '育苗地' },
-      { value: 56.0, label: '果园' },
-      { value: 52.4, label: '草地' },
-      { value: 6.3, label: '观测用地' },
-      { value: 6.1, label: '监测用地' },
-    ],
     five: [
       { name: '耿马镇', value: 87.84 },
       { name: '勐撒镇', value: 60.7 },