feat：修改旧版写法

src/views/bottomLeft/chart/draw.tsx

@@ -20,6 +20,7 @@ export default defineComponent({
       (val: any) => {
         options = {
           tooltip: {
+            show: true,
             trigger: "axis",
             backgroundColor: "rgba(255,255,255,0.1)",
             axisPointer: {
@@ -40,8 +41,8 @@ export default defineComponent({
           grid: {
             x: "8%",
             width: "88%",
-            y: "2%",
-            bottom: '8%'
+            top: "5%",
+            bottom: '7%'
           },
           xAxis: {
             data: val.category,

src/views/bottomLeft/index.vue

@@ -17,24 +17,25 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue'
 import Chart from "./chart/index";
-export default {
+export default defineComponent({
   components: {
     Chart
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
 $box-height: 520px;
 $box-width: 100%;
 .bottomLeft {
-  padding: 25px 16px;
+  padding: 20px 16px;
   height: $box-height;
   width: $box-width;
   border-radius: 5px;
   .bg-color-black {
-    height: $box-height - 40px;
+    height: $box-height - 35px;
     border-radius: 10px;
   }
   .text {

src/views/bottomRight/index.vue

@@ -17,12 +17,13 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue'
 import Chart from "./chart/index";
-export default {
+export default defineComponent({
   components: {
     Chart
   }
-}
+})
 </script>
 
 <style lang="scss" class>

src/views/center/index.vue

@@ -8,7 +8,7 @@
       >
         <p class="ml-3 colorBlue fw-b">{{ item.title }}</p>
         <div>
-          <dv-digital-flop class="dv-dig-flop ml-1" :config="item.number" />
+          <dv-digital-flop class="dv-dig-flop ml-1 mt-1 pl-3" :config="item.config" />
         </div>
       </div>
     </div>
@@ -23,7 +23,7 @@
       <div class="percent">
         <div class="item bg-color-black">
           <span>今日任务通过率</span>
-          <CenterChart
+          <chart
             :id="rate[0].id"
             :tips="rate[0].tips"
             :colorObj="rate[0].colorData"
@@ -31,7 +31,7 @@
         </div>
         <div class="item bg-color-black">
           <span>今日任务达标率</span>
-          <CenterChart
+          <chart
             :id="rate[1].id"
             :tips="rate[1].tips"
             :colorObj="rate[1].colorData"
@@ -46,150 +46,158 @@
 </template>
 
 <script>
-import CenterChart from '../center/chart/draw'
+import { defineComponent, reactive, onMounted } from 'vue'
+import Chart from '../center/chart/draw'
 
-export default {
+export default defineComponent({
   components: {
-    CenterChart
+    Chart
   },
-  data() {
-    return {
-      titleItem: [
+  setup() {
+    // 下层数据
+    const titleDate = [
+      {
+        number: 1020,
+        text: '今年累计任务建次数'
+      },
+      {
+        number: 18,
+        text: '本月累计任务次数'
+      },
+      {
+        number: 4,
+        text: '今日累计任务次数'
+      },
+      {
+        number: 71,
+        text: '今年失败任务次数'
+      },
+      {
+        number: 949,
+        text: '今年失败成功次数'
+      },
+      {
+        number: 811,
+        text: '今年达标任务个数'
+      },
+    ]
+    const titleItem = reactive([])
+
+    // 初始化数据
+    onMounted(() => {
+      setData()
+    })
+
+    const ranking = reactive({
+      data: [
         {
-          title: '今年累计任务建次数',
-          number: {
-            number: [120],
-            toFixed: 1,
-            content: '{nt}'
-          }
+          name: '周口',
+          value: 55
         },
         {
-          title: '本月累计任务次数',
-          number: {
-            number: [18],
-            toFixed: 1,
-            content: '{nt}'
-          }
+          name: '南阳',
+          value: 120
         },
         {
-          title: '今日累计任务次数',
-          number: {
-            number: [2],
-            toFixed: 1,
-            content: '{nt}'
-          }
+          name: '西峡',
+          value: 78
         },
         {
-          title: '今年失败任务次数',
-          number: {
-            number: [14],
-            toFixed: 1,
-            content: '{nt}'
-          }
+          name: '驻马店',
+          value: 66
         },
         {
-          title: '今年成功任务次数',
-          number: {
-            number: [106],
-            toFixed: 1,
-            content: '{nt}'
-          }
+          name: '新乡',
+          value: 80
         },
         {
-          title: '今年达标任务个数',
-          number: {
-            number: [100],
-            toFixed: 1,
-            content: '{nt}'
-          }
+          name: '新乡2',
+          value: 80
+        },
+        {
+          name: '新乡3',
+          value: 80
+        },
+        {
+          name: '新乡4',
+          value: 80
+        },
+        {
+          name: '新乡5',
+          value: 80
+        },
+        {
+          name: '新乡6',
+          value: 80
         }
       ],
-      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: '人'
+    })
+
+    const water = reactive({
+      data: [24, 45],
+      shape: 'roundRect',
+      formatter: '{value}%',
+      waveNum: 3
+    })
+
+    const rate = reactive([
+      {
+        id: 'centerRate1',
+        tips: 60,
+        colorData: {
+          textStyle: '#3fc0fb',
+          series: {
+            color: ['#00bcd44a', 'transparent'],
+            dataColor: {
+              normal: '#03a9f4',
+              shadowColor: '#97e2f5'
+            }
           }
-        ],
-        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'
             }
           }
-        },
-        {
-          id: 'centerRate2',
-          tips: 40,
-          colorData: {
-            textStyle: '#67e0e3',
-            series: {
-              color: ['#faf3a378', 'transparent'],
-              dataColor: {
-                normal: '#ff9800',
-                shadowColor: '#fcebad'
-              }
+        }
+      }
+    ])
+
+    // 设置数据
+    const setData = () => {
+      titleDate.map(e => {
+        titleItem.push({
+          title: e.text,
+          config: {
+            number: [e.number],
+            toFixed: 1,
+            textAlign: 'left',
+            content: '{nt}',
+            style: {
+              fontSize: 26
             }
           }
-        }
-      ]
+        })
+      })
+    }
+    return {
+      titleItem,
+      ranking,
+      water,
+      rate
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
@@ -203,13 +211,13 @@ export default {
     justify-content: space-around;
     .item {
       border-radius: 6px;
-      padding-top: 16px;
+      padding-top: 8px;
       margin-top: 8px;
       width: 32%;
       height: 70px;
       .dv-dig-flop {
-        width: 80px;
-        height: 40px;
+        width: 150px;
+        height: 30px;
       }
     }
   }

src/views/centerLeft1/chart/draw.tsx

@@ -51,7 +51,7 @@ export default defineComponent({
             {
               name: '通过率统计',
               type: 'pie',
-              radius: [10, 55],
+              radius: [10, 50],
               roseType: 'area',
               center: ['50%', '40%'],
               itemStyle: {

src/views/centerLeft1/index.vue

@@ -15,10 +15,14 @@
       </div>
       <!-- 4个主要的数据 -->
       <div class="bottom-data">
-        <div class="item-box" v-for="(item, index) in numberData" :key="index">
+        <div
+          class="item-box mt-2"
+          v-for="(item, index) in numberData"
+          :key="index"
+        >
           <div class="d-flex jc-end">
-            <span class="coin">￥</span>
-            <dv-digital-flop class="dv-digital-flop" :config="item.number" />
+            <i class="iconfont" :class="[iconFont[index]]" />
+            <dv-digital-flop class="dv-digital-flop" :config="item.config" />
           </div>
           <p>
             <span> {{ item.text }} </span>
@@ -35,49 +39,58 @@ import { defineComponent, onMounted, reactive } from 'vue'
 import Chart from './chart/index'
 export default defineComponent({
   components: {
-    Chart,
+    Chart
   },
   setup() {
     // 下层数据
-    const numberData = reactive([
+    const dataArr = [
       {
-        number: {
-          number: [15],
-          toFixed: 1,
-          content: '{nt}'
-        },
+        number: 150,
         text: '今日构建总量'
       },
       {
-        number: {
-          number: [144],
-          toFixed: 1,
-          content: '{nt}'
-        },
+        number: 144,
         text: '总共完成数量'
       },
       {
-        number: {
-          number: [361],
-          toFixed: 1,
-          content: '{nt}'
-        },
+        number: 361,
         text: '正在编译数量'
       },
       {
-        number: {
-          number: [157],
-          toFixed: 1,
-          content: '{nt}'
-        },
+        number: 571,
         text: '未通过数量'
       }
-    ])
+    ]
+    // 对应图标
+    const iconFont = [
+      'icon-diagnose',
+      'icon-monitoring',
+      'icon-cloudupload',
+      'icon-clouddownload'
+    ]
+    const numberData = reactive([])
 
-    onMounted(()=>{
+    onMounted(() => {
+      setData()
       changeTiming()
     })
 
+    const setData = () => {
+      dataArr.forEach(e => {
+        numberData.push({
+          config: {
+            number: [e.number],
+            toFixed: 1,
+            content: '{nt}',
+            style: {
+              fontSize: 24
+            }
+          },
+          text: e.text
+        })
+      })
+    }
+
     const changeTiming = () => {
       setInterval(() => {
         changeNumber()
@@ -85,11 +98,11 @@ export default defineComponent({
     }
     const changeNumber = () => {
       numberData.forEach((item, index) => {
-        item.number.number[0] += ++index
-        item.number = { ...item.number }
+        item.config.number[0] += ++index
+        item.config = { ...item.config }
       })
     }
-    return { numberData }
+    return { numberData, iconFont}
   }
 })
 </script>
@@ -102,7 +115,7 @@ $box-height: 410px;
   padding: 16px;
   height: $box-height;
   width: $box-width;
-  border-radius: 5px;
+  border-radius: 10px;
   .bg-color-black {
     height: $box-height - 30px;
     border-radius: 10px;
@@ -119,22 +132,22 @@ $box-height: 410px;
 
   .bottom-data {
     .item-box {
-      &>div{
-        padding-right: 10px;
+      & > div {
+        padding-right: 5px;
       }
+      font-size: 14px;
       float: right;
       position: relative;
       width: 50%;
       color: #d3d6dd;
       .dv-digital-flop {
-        width: 80px;
-        height: 40px;
+        width: 120px;
+        height: 30px;
       }
-      // 金币
-      .coin {
+      i {
         font-size: 20px;
-        color: #ffc107;
-        line-height: 40px;
+        line-height: 30px;
+        margin-left: 20px;
       }
       .colorYellow {
         color: yellowgreen;

src/views/centerLeft2/chart/draw.tsx

@@ -181,34 +181,31 @@ export default defineComponent({
           //   },
           // },
           // 底部背景
-          geo: {
+          geo: [{
             show: true,
             aspectScale: 0.85, //长宽比
-            zoom: 1.2,
+            zoom: 1.16,
             top: '10%',
-            left: '16%',
+            left: '17%',
             map: '福建',
             roam: false,
             itemStyle: {
               normal: {
-                borderColor: 'rgba(192,245,249,.8)',
-                borderWidth: 1,
-                shadowColor: '#6FFDFF',
-                shadowOffsetY: 0,
-                shadowBlur: 10,
-                areaColor: 'rgba(29,85,139,.6)',
-              },
-
-            },
-          },
+                borderColor: '#7ad5ff7f',
+                shadowOffsetY: 5,
+                shadowBlur: 15,
+                areaColor: 'rgba(5,21,35,0.1)'
+              }
+            }
+          }],
           series: [
             {
               name: '相关指数',
               type: 'map',
               aspectScale: 0.85, //长宽比
-              zoom: 1.2, //缩放
+              zoom: 1.16, //缩放
               mapType: '福建', // 自定义扩展图表类型
-              top: '10%',
+              top: '9%',
               left: '16%',
               itemStyle: {
                 normal: {

src/views/centerRight1/index.vue

@@ -16,41 +16,42 @@
 </template>
 
 <script>
+import { defineComponent, reactive } from 'vue'
 import Chart from './chart/index.tsx'
 
-export default {
+export default defineComponent({
   components: {
     Chart
   },
-  data() {
-    return {
-      config: {
-        data: [
-          {
-            name: '南阳',
-            value: 167
-          },
-          {
-            name: '周口',
-            value: 67
-          },
-          {
-            name: '漯河',
-            value: 123
-          },
-          {
-            name: '郑州',
-            value: 55
-          },
-          {
-            name: '西峡',
-            value: 98
-          }
-        ]
-      }
-    }
+  setup() {
+    const config = reactive({
+      data: [
+        {
+          name: '南阳',
+          value: 167
+        },
+        {
+          name: '周口',
+          value: 67
+        },
+        {
+          name: '漯河',
+          value: 123
+        },
+        {
+          name: '郑州',
+          value: 55
+        },
+        {
+          name: '西峡',
+          value: 98
+        }
+      ]
+    })
+
+    return { config }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/views/centerRight2/index.vue

@@ -17,35 +17,35 @@
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      config: {
-        header: ['组件', '分支', '覆盖率'],
-        data: [
-          ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
-          ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
-          ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
-          ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
-          ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
-          ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
-          ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
-          ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
-          ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
-          ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
-        ],
-        rowNum: 7, //表格行数
-        headerHeight: 35,
-        headerBGC: '#0f1325', //表头
-        oddRowBGC: '#0f1325', //奇数行
-        evenRowBGC: '#171c33', //偶数行
-        index: true,
-        columnWidth: [50],
-        align: ['center']
-      }
-    }
+import { defineComponent, reactive } from 'vue'
+export default defineComponent({
+  setup() {
+    const config = reactive({
+      header: ['组件', '分支', '覆盖率'],
+      data: [
+        ['组件1', 'dev-1', "<span  class='colorGrass'>↑75%</span>"],
+        ['组件2', 'dev-2', "<span  class='colorRed'>↓33%</span>"],
+        ['组件3', 'dev-3', "<span  class='colorGrass'>↑100%</span>"],
+        ['组件4', 'rea-1', "<span  class='colorGrass'>↑94%</span>"],
+        ['组件5', 'rea-2', "<span  class='colorGrass'>↑95%</span>"],
+        ['组件6', 'fix-2', "<span  class='colorGrass'>↑63%</span>"],
+        ['组件7', 'fix-4', "<span  class='colorGrass'>↑84%</span>"],
+        ['组件8', 'fix-7', "<span  class='colorRed'>↓46%</span>"],
+        ['组件9', 'dev-2', "<span  class='colorRed'>↓13%</span>"],
+        ['组件10', 'dev-9', "<span  class='colorGrass'>↑76%</span>"]
+      ],
+      rowNum: 7, //表格行数
+      headerHeight: 35,
+      headerBGC: '#0f1325', //表头
+      oddRowBGC: '#0f1325', //奇数行
+      evenRowBGC: '#171c33', //偶数行
+      index: true,
+      columnWidth: [50],
+      align: ['center']
+    })
+    return { config }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

src/views/index/index.vue

@@ -32,7 +32,7 @@
               <span class="text">{{subtitle[0]}}</span>
             </div>
             <div class="react-left ml-3" >
-              <span class="text colorBlue">{{subtitle[1]}}</span>
+              <span class="text">{{subtitle[1]}}</span>
             </div>
           </div>
           <div class="d-flex aside-width">