feat：新增中间部分的图案

src/views/center/chart/draw.tsx

@@ -0,0 +1,92 @@
+import { defineComponent, watch, shallowReactive } from 'vue'
+
+// 声明类型
+const PropsType = {
+  tips: {
+    type: Number,
+    default: 50,
+    require: true
+  },
+  colorObj: {
+    type: Object,
+    default: () => ({
+      textStyle: "#3fc0fb",
+      series: {
+        color: ["#00bcd44a", "transparent"],
+        dataColor: {
+          normal: "#03a9f4",
+          shadowColor: "#97e2f5"
+        }
+      }
+    })
+  }
+} as const
+
+// 定义主体
+export default defineComponent({
+  props: PropsType,
+  setup(props) {
+    // 配置项
+    let options = shallowReactive({})
+
+    watch(
+      () => props.tips,
+      (val: any) => {
+        options = {
+          title: {
+            text: val * 1 + "%",
+            x: "center",
+            y: "center",
+            textStyle: {
+              color: props.colorObj.textStyle,
+              fontSize: 16
+            }
+          },
+          series: [
+            {
+              type: "pie",
+              radius: ["75%", "80%"],
+              center: ["50%", "50%"],
+              hoverAnimation: false,
+              color: props.colorObj.series.color,
+              label: {
+                normal: {
+                  show: false
+                }
+              },
+              data: [
+                {
+                  value: val,
+                  itemStyle: {
+                    normal: {
+                      color: props.colorObj.series.dataColor.normal,
+                      shadowBlur: 10,
+                      shadowColor: props.colorObj.series.dataColor.shadowColor
+                    }
+                  }
+                },
+                {
+                  value: 100 - val
+                }
+              ]
+            }
+          ]
+        }
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    )
+
+    return () => {
+      const height = "100px"
+      const width = "120px"
+
+      return <div>
+        <echart options={options} height={height} width={width} />
+      </div>
+    }
+  }
+})
+

src/views/center/index.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="center">
+    <div class="up">
+      <div
+        class="bg-color-black item"
+        v-for="item in titleItem"
+        :key="item.title"
+      >
+        <p class="ml-3 colorBlue fw-b">{{ item.title }}</p>
+        <div>
+          <dv-digital-flop class="dv-dig-flop ml-1" :config="item.number" />
+        </div>
+      </div>
+    </div>
+    <div class="down">
+      <div class="ranking bg-color-black">
+        <span>
+          <i class="iconfont icon-tongji2"></i>
+        </span>
+        <span class="fs-xl text mx-2 mb-1">年度负责人组件达标榜</span>
+        <dv-scroll-ranking-board class="dv-scr-rank-board" :config="ranking" />
+      </div>
+      <div class="percent">
+        <div class="item bg-color-black">
+          <span>今日任务通过率</span>
+          <CenterChart
+            :id="rate[0].id"
+            :tips="rate[0].tips"
+            :colorObj="rate[0].colorData"
+          />
+        </div>
+        <div class="item bg-color-black">
+          <span>今日任务达标率</span>
+          <CenterChart
+            :id="rate[1].id"
+            :tips="rate[1].tips"
+            :colorObj="rate[1].colorData"
+          />
+        </div>
+        <div class="water">
+          <dv-water-level-pond class="dv-wa-le-po" :config="water" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CenterChart from '../center/chart/draw'
+
+export default {
+  components: {
+    CenterChart
+  },
+  data() {
+    return {
+      titleItem: [
+        {
+          title: '今年累计任务建次数',
+          number: {
+            number: [120],
+            toFixed: 1,
+            content: '{nt}'
+          }
+        },
+        {
+          title: '本月累计任务次数',
+          number: {
+            number: [18],
+            toFixed: 1,
+            content: '{nt}'
+          }
+        },
+        {
+          title: '今日累计任务次数',
+          number: {
+            number: [2],
+            toFixed: 1,
+            content: '{nt}'
+          }
+        },
+        {
+          title: '今年失败任务次数',
+          number: {
+            number: [14],
+            toFixed: 1,
+            content: '{nt}'
+          }
+        },
+        {
+          title: '今年成功任务次数',
+          number: {
+            number: [106],
+            toFixed: 1,
+            content: '{nt}'
+          }
+        },
+        {
+          title: '今年达标任务个数',
+          number: {
+            number: [100],
+            toFixed: 1,
+            content: '{nt}'
+          }
+        }
+      ],
+      ranking: {
+        data: [
+          {
+            name: '周口',
+            value: 55
+          },
+          {
+            name: '南阳',
+            value: 120
+          },
+          {
+            name: '西峡',
+            value: 78
+          },
+          {
+            name: '驻马店',
+            value: 66
+          },
+          {
+            name: '新乡',
+            value: 80
+          },
+          {
+            name: '新乡2',
+            value: 80
+          },
+          {
+            name: '新乡3',
+            value: 80
+          },
+          {
+            name: '新乡4',
+            value: 80
+          },
+          {
+            name: '新乡5',
+            value: 80
+          },
+          {
+            name: '新乡6',
+            value: 80
+          }
+        ],
+        carousel: 'single',
+        unit: '人'
+      },
+      water: {
+        data: [24, 45],
+        shape: 'roundRect',
+        formatter: '{value}%',
+        waveNum: 3
+      },
+      // 通过率和达标率的组件复用数据
+      rate: [
+        {
+          id: 'centerRate1',
+          tips: 60,
+          colorData: {
+            textStyle: '#3fc0fb',
+            series: {
+              color: ['#00bcd44a', 'transparent'],
+              dataColor: {
+                normal: '#03a9f4',
+                shadowColor: '#97e2f5'
+              }
+            }
+          }
+        },
+        {
+          id: 'centerRate2',
+          tips: 40,
+          colorData: {
+            textStyle: '#67e0e3',
+            series: {
+              color: ['#faf3a378', 'transparent'],
+              dataColor: {
+                normal: '#ff9800',
+                shadowColor: '#fcebad'
+              }
+            }
+          }
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.center {
+  display: flex;
+  flex-direction: column;
+  .up {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    .item {
+      border-radius: 6px;
+      padding-top: 16px;
+      margin-top: 8px;
+      width: 32%;
+      height: 70px;
+      .dv-dig-flop {
+        width: 80px;
+        height: 40px;
+      }
+    }
+  }
+  .down {
+    padding: 6px 4px;
+    padding-bottom: 0;
+    width: 100%;
+    display: flex;
+    height: 255px;
+    justify-content: space-between;
+    .bg-color-black {
+      border-radius: 5px;
+    }
+    .ranking {
+      padding: 10px;
+      width: 59%;
+      .dv-scr-rank-board {
+        height: 220px;
+      }
+    }
+    .percent {
+      width: 40%;
+      display: flex;
+      flex-wrap: wrap;
+      .item {
+        width: 50%;
+        height: 120px;
+        span {
+          margin-top: 8px;
+          font-size: 14px;
+          display: flex;
+          justify-content: center;
+        }
+      }
+      .water {
+        width: 100%;
+        .dv-wa-le-po {
+          height: 120px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/centerLeft1/index.vue

@@ -3,7 +3,7 @@
     <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
         <span>
-          <icon class="iconfont icon-tongji4" />
+          <i class="iconfont icon-tongji4" />
         </span>
         <div class="d-flex">
           <span class="fs-xl text mx-2">任务通过率</span>

src/views/centerLeft2/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="centreLeft1">
+  <div class="centreLeft1">
     <div class="bg-color-black">
       <div class="d-flex pt-2 pl-2">
         <span>
@@ -28,7 +28,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-#centreLeft1 {
+.centreLeft1 {
   $box-width: 300px;
   $box-height: 410px;
   padding: 16px;

src/views/index/index.vue

@@ -64,7 +64,7 @@
             </div>
             <!-- 中间 -->
             <div>
-              <!-- <center /> -->
+              <center />
             </div>
             <!-- 中间 -->
             <div>
@@ -100,11 +100,13 @@ import useIndex from '@/utils/useDraw'
 import { title, subtitle, moduleInfo } from '@/constant/index'
 import CenterLeft1 from "../centerLeft1/index.vue";
 import CenterLeft2 from "../centerLeft2/index.vue";
+import Center from "../center/index.vue";
 
 export default defineComponent({
   components: {
     CenterLeft1,
-    CenterLeft2
+    CenterLeft2,
+    Center
   },
   setup() {
     // * 加载标识