feat: 新增右侧两个图表

src/views/centerRight1/chart/draw.tsx

@@ -0,0 +1,131 @@
+import { defineComponent, watch, shallowReactive } from 'vue'
+
+// 声明类型
+const PropsType = {
+  cdata: {
+    type: Object,
+    require: true
+  }
+} as const
+
+// 定义主体
+export default defineComponent({
+  props: PropsType,
+  setup(props) {
+    // 定义固定配置项
+    const lineStyle = {
+      normal: {
+        width: 1,
+        opacity: 0.5
+      }
+    };
+    // 配置项
+    let options = shallowReactive({})
+
+    watch(
+      () => props.cdata,
+      (val: any) => {
+        options = {
+          radar: {
+            indicator: val.indicatorData,
+            shape: "circle",
+            splitNumber: 5,
+            radius: ["0%", "65%"],
+            name: {
+              textStyle: {
+                color: "rgb(238, 197, 102)"
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                color: [
+                  "rgba(238, 197, 102, 0.1)",
+                  "rgba(238, 197, 102, 0.2)",
+                  "rgba(238, 197, 102, 0.4)",
+                  "rgba(238, 197, 102, 0.6)",
+                  "rgba(238, 197, 102, 0.8)",
+                  "rgba(238, 197, 102, 1)"
+                ].reverse()
+              }
+            },
+            splitArea: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgba(238, 197, 102, 0.5)"
+              }
+            }
+          },
+          series: [
+            {
+              name: "北京",
+              type: "radar",
+              lineStyle: lineStyle,
+              data: val.dataBJ,
+              symbol: "none",
+              itemStyle: {
+                normal: {
+                  color: "#F9713C"
+                }
+              },
+              areaStyle: {
+                normal: {
+                  opacity: 0.1
+                }
+              }
+            },
+            {
+              name: "上海",
+              type: "radar",
+              lineStyle: lineStyle,
+              data: val.dataSH,
+              symbol: "none",
+              itemStyle: {
+                normal: {
+                  color: "#B3E4A1"
+                }
+              },
+              areaStyle: {
+                normal: {
+                  opacity: 0.05
+                }
+              }
+            },
+            {
+              name: "广州",
+              type: "radar",
+              lineStyle: lineStyle,
+              data: val.dataGZ,
+              symbol: "none",
+              itemStyle: {
+                normal: {
+                  color: "rgb(238, 197, 102)"
+                }
+              },
+              areaStyle: {
+                normal: {
+                  opacity: 0.05
+                }
+              }
+            } //end
+          ]
+        }
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    )
+
+    return () => {
+      const height = "200px"
+      const width = "260px"
+
+      return <div>
+        <echart options={options} height={height} width={width} />
+      </div>
+    }
+  }
+})
+

src/views/centerRight1/chart/index.tsx

@@ -0,0 +1,51 @@
+import { defineComponent, reactive } from 'vue'
+import Draw from './draw'
+export default defineComponent({
+  components: {
+    Draw
+  },
+  setup() {
+    const cdata = reactive({
+      indicatorData: [
+        { name: "数据1", max: 300 },
+        { name: "数据2", max: 250 },
+        { name: "数据3", max: 300 },
+        { name: "数据4", max: 5 },
+        { name: "数据5", max: 200 },
+        { name: "数据6", max: 100 }
+      ],
+      dataBJ: [
+        [94, 69, 114, 2.08, 73, 39, 22],
+        [99, 73, 110, 2.43, 76, 48, 23],
+        [31, 12, 30, 0.5, 32, 16, 24],
+        [42, 27, 43, 1, 53, 22, 25],
+        [154, 117, 157, 3.05, 92, 58, 26],
+        [234, 185, 230, 4.09, 123, 69, 27],
+        [160, 120, 186, 2.77, 91, 50, 28]
+      ],
+      dataGZ: [
+        [84, 94, 140, 2.238, 68, 18, 22],
+        [93, 77, 104, 1.165, 53, 7, 23],
+        [99, 130, 227, 3.97, 55, 15, 24],
+        [146, 84, 139, 1.094, 40, 17, 25],
+        [113, 108, 137, 1.481, 48, 15, 26],
+        [81, 48, 62, 1.619, 26, 3, 27],
+        [56, 48, 68, 1.336, 37, 9, 28]
+      ],
+      dataSH: [
+        [91, 45, 125, 0.82, 34, 23, 1],
+        [65, 27, 78, 0.86, 45, 29, 2],
+        [83, 60, 84, 1.09, 73, 27, 3],
+        [109, 81, 121, 1.28, 68, 51, 4],
+        [106, 77, 114, 1.07, 55, 51, 5],
+        [109, 81, 121, 1.28, 68, 51, 6],
+        [106, 77, 114, 1.07, 55, 51, 7]
+      ]
+    })
+    return () => {
+      return <div>
+        <draw cdata={cdata} />
+      </div>
+    }
+  }
+})

src/views/centerRight1/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="centerRight1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <i class="iconfont icon-align-left" />
+        </span>
+        <span class="fs-xl text mx-2">产品销售渠道分析</span>
+      </div>
+      <div class="d-flex ai-center flex-column body-box">
+        <dv-capsule-chart class="dv-cap-chart" :config="config" />
+        <chart />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Chart from './chart/index.tsx'
+
+export default {
+  components: {
+    Chart
+  },
+  data() {
+    return {
+      config: {
+        data: [
+          {
+            name: '南阳',
+            value: 167
+          },
+          {
+            name: '周口',
+            value: 67
+          },
+          {
+            name: '漯河',
+            value: 123
+          },
+          {
+            name: '郑州',
+            value: 55
+          },
+          {
+            name: '西峡',
+            value: 98
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+$box-height: 400px;
+$box-width: 340px;
+.centerRight1 {
+  padding: 5px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    padding: 5px;
+    height: $box-height;
+    width: $box-width;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-cap-chart {
+      width: 100%;
+      height: 160px;
+    }
+  }
+}
+</style>

src/views/centerRight2/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="centerRight2">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span>
+          <i class="iconfont icon-vector" />
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">任务完成排行榜</span>
+        </div>
+      </div>
+      <div class="d-flex mt-1 jc-center body-box">
+        <dv-scroll-board class="dv-scr-board" :config="config" />
+      </div>
+    </div>
+  </div>
+</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']
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+$box-height: 410px;
+$box-width: 300px;
+.centerRight2 {
+  padding: 16px;
+  padding-top: 20px;
+  height: $box-height;
+  width: $box-width;
+  border-radius: 5px;
+  .bg-color-black {
+    height: $box-height - 30px;
+    border-radius: 10px;
+  }
+  .text {
+    color: #c3cbde;
+  }
+  .body-box {
+    border-radius: 10px;
+    overflow: hidden;
+    .dv-scr-board {
+      width: 270px;
+      height: 340px;
+    }
+  }
+}
+</style>

src/views/index/index.vue

@@ -54,12 +54,12 @@
           <div class="content-box">
             <div>
               <dv-border-box-12>
-                <centerLeft1 />
+                <center-left1 />
               </dv-border-box-12>
             </div>
             <div>
               <dv-border-box-12>
-                <centerLeft2 />
+                <center-left2 />
               </dv-border-box-12>
             </div>
             <!-- 中间 -->
@@ -68,11 +68,11 @@
             </div>
             <!-- 中间 -->
             <div>
-              <!-- <centerRight2 /> -->
+              <center-right1 />
             </div>
             <div>
               <dv-border-box-13>
-                <!-- <centerRight1 /> -->
+                <center-right2 />
               </dv-border-box-13>
             </div>
           </div>
@@ -100,13 +100,17 @@ 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 CenterRight1 from "../centerRight1/index.vue";
+import CenterRight2 from "../centerRight2/index.vue";
 import Center from "../center/index.vue";
 
 export default defineComponent({
   components: {
     CenterLeft1,
     CenterLeft2,
-    Center
+    Center,
+    CenterRight1,
+    CenterRight2
   },
   setup() {
     // * 加载标识