From ec0d91663fcb07708fee2623bf9720705701ae35 Mon Sep 17 00:00:00 2001
From: wangyilin <1454641981@qq.com>
Date: Wed, 14 May 2025 14:59:20 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/bottomRight/chart/draw.tsx     | 365 ------------------
 .../components/bottomRight/chart/draw.vue     | 363 +++++++++++++++++
 .../components/bottomRight/chart/index.tsx    |  92 -----
 .../components/bottomRight/chart/index.vue    |  81 ++++
 .../components/bottomRight/index.vue          |   4 +-
 .../components/centerLeft1/chart/draw.tsx     |  97 -----
 .../components/centerLeft1/chart/draw.vue     | 105 +++++
 .../components/centerLeft1/chart/index.tsx    |  39 --
 .../components/centerLeft1/chart/index.vue    |  39 ++
 .../components/centerLeft1/index.vue          |  14 +-
 .../components/centerRight1/chart/draw.tsx    | 131 -------
 .../components/centerRight1/chart/draw.vue    | 143 +++++++
 .../components/centerRight1/chart/index.tsx   |  51 ---
 .../components/centerRight1/chart/index.vue   |  62 +++
 .../components/centerRight1/index.vue         |   3 +-
 .../overviewLargeScreen/constant/index.ts     |   2 +-
 src/views/overviewLargeScreen/index.vue       |  14 +-
 17 files changed, 811 insertions(+), 794 deletions(-)
 delete mode 100644 src/views/overviewLargeScreen/components/bottomRight/chart/draw.tsx
 create mode 100644 src/views/overviewLargeScreen/components/bottomRight/chart/draw.vue
 delete mode 100644 src/views/overviewLargeScreen/components/bottomRight/chart/index.tsx
 create mode 100644 src/views/overviewLargeScreen/components/bottomRight/chart/index.vue
 delete mode 100644 src/views/overviewLargeScreen/components/centerLeft1/chart/draw.tsx
 create mode 100644 src/views/overviewLargeScreen/components/centerLeft1/chart/draw.vue
 delete mode 100644 src/views/overviewLargeScreen/components/centerLeft1/chart/index.tsx
 create mode 100644 src/views/overviewLargeScreen/components/centerLeft1/chart/index.vue
 delete mode 100644 src/views/overviewLargeScreen/components/centerRight1/chart/draw.tsx
 create mode 100644 src/views/overviewLargeScreen/components/centerRight1/chart/draw.vue
 delete mode 100644 src/views/overviewLargeScreen/components/centerRight1/chart/index.tsx
 create mode 100644 src/views/overviewLargeScreen/components/centerRight1/chart/index.vue

diff --git a/src/views/overviewLargeScreen/components/bottomRight/chart/draw.tsx b/src/views/overviewLargeScreen/components/bottomRight/chart/draw.tsx
deleted file mode 100644
index c9af240..0000000
--- a/src/views/overviewLargeScreen/components/bottomRight/chart/draw.tsx
+++ /dev/null
@@ -1,365 +0,0 @@
-import { defineComponent, watch, ref } from 'vue';
-// 声明类型
-const PropsType = {
-  cdata: {
-    type: Object,
-    require: true
-  }
-} as const
-
-// 定义主体
-export default defineComponent({
-  props: PropsType,
-  setup(props) {
-    // 定义 ref
-    const chartRef = ref()
-    // 定义颜色
-    const colorList = {
-      linearYtoG: {
-        type: "linear",
-        x: 0,
-        y: 0,
-        x2: 1,
-        y2: 1,
-        colorStops: [
-          {
-            offset: 0,
-            color: "#f5b44d"
-          },
-          {
-            offset: 1,
-            color: "#28f8de"
-          }
-        ]
-      },
-      linearGtoB: {
-        type: "linear",
-        x: 0,
-        y: 0,
-        x2: 1,
-        y2: 0,
-        colorStops: [
-          {
-            offset: 0,
-            color: "#43dfa2"
-          },
-          {
-            offset: 1,
-            color: "#28f8de"
-          }
-        ]
-      },
-      linearBtoG: {
-        type: "linear",
-        x: 0,
-        y: 0,
-        x2: 1,
-        y2: 0,
-        colorStops: [
-          {
-            offset: 0,
-            color: "#1c98e8"
-          },
-          {
-            offset: 1,
-            color: "#28f8de"
-          }
-        ]
-      },
-      areaBtoG: {
-        type: "linear",
-        x: 0,
-        y: 0,
-        x2: 0,
-        y2: 1,
-        colorStops: [
-          {
-            offset: 0,
-            color: "rgba(35,184,210,.2)"
-          },
-          {
-            offset: 1,
-            color: "rgba(35,184,210,0)"
-          }
-        ]
-      }
-    }
-    // 配置项
-    let options ={}
-
-    // 监听
-    watch(
-      () => props.cdata,
-      (val: any) => {
-        options = {
-          title: {
-            text: "",
-            textStyle: {
-              color: "#D3D6DD",
-              fontSize: 24,
-              fontWeight: "normal"
-            },
-            subtext: val.year + "/" + val.weekCategory[6],
-            subtextStyle: {
-              color: "#fff",
-              fontSize: 16
-            },
-            top: 50,
-            left: 80
-          },
-          legend: {
-            top: 120,
-            left: 80,
-            orient: "vertical",
-            itemGap: 15,
-            itemWidth: 12,
-            itemHeight: 12,
-            data: ["平均指标", "我的指标"],
-            textStyle: {
-              color: "#fff",
-              fontSize: 14
-            }
-          },
-          tooltip: {
-            trigger: "item"
-          },
-          radar: {
-            center: ["68%", "27%"],
-            radius: "40%",
-            name: {
-              color: "#fff"
-            },
-            splitNumber: 8,
-            axisLine: {
-              lineStyle: {
-                color: colorList.linearYtoG,
-                opacity: 0.6
-              }
-            },
-            splitLine: {
-              lineStyle: {
-                color: colorList.linearYtoG,
-                opacity: 0.6
-              }
-            },
-            splitArea: {
-              areaStyle: {
-                color: "#fff",
-                opacity: 0.1,
-                shadowBlur: 25,
-                shadowColor: "#000",
-                shadowOffsetX: 0,
-                shadowOffsetY: 5
-              }
-            },
-            indicator: [
-              {
-                name: "服务态度",
-                max: val.maxData
-              },
-              {
-                name: "产品质量",
-                max: 10
-              },
-              {
-                name: "任务效率",
-                max: 12
-              },
-              {
-                name: "售后保障",
-                max: 3.5
-              }
-            ]
-          },
-          grid: {
-            left: 90,
-            right: 80,
-            bottom: '15%',
-            top: "50%"
-          },
-          xAxis: {
-            type: "category",
-            position: "bottom",
-            axisLine: true,
-            axisLabel: {
-              color: "rgba(255,255,255,.8)",
-              fontSize: 12
-            },
-            data: val.weekCategory
-          },
-          // 下方Y轴
-          yAxis: {
-            name: "工单",
-            nameLocation: "end",
-            nameGap: 24,
-            nameTextStyle: {
-              color: "rgba(255,255,255,.5)",
-              fontSize: 14
-            },
-            max: val.maxData,
-            splitNumber: 4,
-
-            axisLine: {
-              lineStyle: {
-                opacity: 0
-              }
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: "#fff",
-                opacity: 0.1
-              }
-            },
-            axisLabel: {
-              color: "rgba(255,255,255,.8)",
-              fontSize: 12
-            }
-          },
-          series: [
-            {
-              name: "",
-              type: "radar",
-              symbolSize: 0,
-              data: [
-                {
-                  value: val.radarDataAvg[6],
-                  name: "平均指标",
-                  itemStyle: {
-                    normal: {
-                      color: "#f8d351"
-                    }
-                  },
-                  lineStyle: {
-                    normal: {
-                      opacity: 0
-                    }
-                  },
-                  areaStyle: {
-                    normal: {
-                      color: "#f8d351",
-                      shadowBlur: 25,
-                      shadowColor: "rgba(248,211,81,.3)",
-                      shadowOffsetX: 0,
-                      shadowOffsetY: -10,
-                      opacity: 1
-                    }
-                  }
-                },
-                {
-                  value: val.radarData[6],
-                  name: "我的指标",
-                  itemStyle: {
-                    normal: {
-                      color: "#43dfa2"
-                    }
-                  },
-                  lineStyle: {
-                    normal: {
-                      opacity: 0
-                    }
-                  },
-                  areaStyle: {
-                    normal: {
-                      color: colorList.linearGtoB,
-                      shadowBlur: 15,
-                      shadowColor: "rgba(0,0,0,.2)",
-                      shadowOffsetX: 0,
-                      shadowOffsetY: 5,
-                      opacity: 0.8
-                    }
-                  }
-                }
-              ]
-            },
-            {
-              name: "",
-              type: "line",
-              smooth: true,
-              symbol: "emptyCircle",
-              symbolSize: 8,
-              itemStyle: {
-                normal: {
-                  color: "#fff"
-                }
-              },
-              lineStyle: {
-                normal: {
-                  color: colorList.linearBtoG,
-                  width: 3
-                }
-              },
-              areaStyle: {
-                normal: {
-                  color: colorList.areaBtoG
-                }
-              },
-              data: val.weekLineData,
-              lineSmooth: true,
-              markLine: {
-                silent: true,
-                data: [
-                  {
-                    type: "average",
-                    name: "平均值"
-                  }
-                ],
-                precision: 0,
-                label: {
-                  normal: {
-                    formatter: "平均值: \n {c}"
-                  }
-                },
-                lineStyle: {
-                  normal: {
-                    color: "rgba(248,211,81,.7)"
-                  }
-                }
-              },
-              tooltip: {
-                position: "top",
-                formatter: "{c} m",
-                backgroundColor: "rgba(28,152,232,.2)",
-                padding: 6
-              }
-            },
-            {
-              name: "占位背景",
-              type: "bar",
-              itemStyle: {
-                normal: {
-                  show: true,
-                  color: "#000",
-                  opacity: 0
-                }
-              },
-              silent: true,
-              barWidth: "50%",
-              data: val.weekMaxData,
-              animation: false
-            }
-          ]
-        }
-        // 手动触发更新
-        if (chartRef.value) {
-          // 通过初始化参数打入数据
-          chartRef.value.initChart(options)
-        }
-      },
-      {
-        immediate: true,
-        deep: true
-      }
-    )
-
-    return () => {
-      const height = "480px"
-      const width = "100%"
-
-      return <div>
-        <echart ref={chartRef} height={height} width={width} />
-      </div>
-    }
-  }
-})
-
diff --git a/src/views/overviewLargeScreen/components/bottomRight/chart/draw.vue b/src/views/overviewLargeScreen/components/bottomRight/chart/draw.vue
new file mode 100644
index 0000000..69b4246
--- /dev/null
+++ b/src/views/overviewLargeScreen/components/bottomRight/chart/draw.vue
@@ -0,0 +1,363 @@
+<template>
+  <div :style="{ height, width }" ref="chartRef"></div>
+</template>
+<script setup lang="tsx">
+  import * as echarts from "echarts";
+  import { watch,ref } from "vue";
+  // 接收 props
+  const props = defineProps<{
+    cdata: {
+      year: null,
+      weekCategory: string[],
+      radarData: string[],
+      radarDataAvg: string[],
+      maxData: number,
+      weekMaxData: string[],
+      weekLineData: string[],
+    };
+  }>();
+
+  const height = "450px";
+  const width = "1000px";
+  // 定义 ref
+  const chartRef = ref();
+
+  const colorList = {
+    linearYtoG: {
+      type: "linear",
+      x: 0,
+      y: 0,
+      x2: 1,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0,
+          color: "#f5b44d"
+        },
+        {
+          offset: 1,
+          color: "#28f8de"
+        }
+      ]
+    },
+    linearGtoB: {
+      type: "linear",
+      x: 0,
+      y: 0,
+      x2: 1,
+      y2: 0,
+      colorStops: [
+        {
+          offset: 0,
+          color: "#43dfa2"
+        },
+        {
+          offset: 1,
+          color: "#28f8de"
+        }
+      ]
+    },
+    linearBtoG: {
+      type: "linear",
+      x: 0,
+      y: 0,
+      x2: 1,
+      y2: 0,
+      colorStops: [
+        {
+          offset: 0,
+          color: "#1c98e8"
+        },
+        {
+          offset: 1,
+          color: "#28f8de"
+        }
+      ]
+    },
+    areaBtoG: {
+      type: "linear",
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        {
+          offset: 0,
+          color: "rgba(35,184,210,.2)"
+        },
+        {
+          offset: 1,
+          color: "rgba(35,184,210,0)"
+        }
+      ]
+    }
+  };
+
+  let options = ref({});
+  // echarts 实例
+  let chartInstance: echarts.ECharts | null = null;
+  watch(() => props.cdata, (val: typeof props.cdata) => {
+    options.value = {
+      title: {
+        text: "",
+        textStyle: {
+          color: "#D3D6DD",
+          fontSize: 24,
+          fontWeight: "normal"
+        },
+        subtext: val.year + "/" + val.weekCategory[6],
+        subtextStyle: {
+          color: "#fff",
+          fontSize: 16
+        },
+        top: 50,
+        left: 80
+      },
+      legend: {
+        top: 120,
+        left: 80,
+        orient: "vertical",
+        itemGap: 15,
+        itemWidth: 12,
+        itemHeight: 12,
+        data: ["平均指标", "我的指标"],
+        textStyle: {
+          color: "#fff",
+          fontSize: 14
+        }
+      },
+      tooltip: {
+        trigger: "item"
+      },
+      radar: {
+        center: ["68%", "27%"],
+        radius: "40%",
+        name: {
+          color: "#fff"
+        },
+        splitNumber: 8,
+        axisLine: {
+          lineStyle: {
+            color: colorList.linearYtoG,
+            opacity: 0.6
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: colorList.linearYtoG,
+            opacity: 0.6
+          }
+        },
+        splitArea: {
+          areaStyle: {
+            color: "#fff",
+            opacity: 0.1,
+            shadowBlur: 25,
+            shadowColor: "#000",
+            shadowOffsetX: 0,
+            shadowOffsetY: 5
+          }
+        },
+        indicator: [
+          {
+            name: "服务态度",
+            max: val.maxData
+          },
+          {
+            name: "产品质量",
+            max: 10
+          },
+          {
+            name: "任务效率",
+            max: 12
+          },
+          {
+            name: "售后保障",
+            max: 3.5
+          }
+        ]
+      },
+      grid: {
+        left: 90,
+        right: 80,
+        bottom: "15%",
+        top: "50%"
+      },
+      xAxis: {
+        type: "category",
+        position: "bottom",
+        axisLine: true,
+        axisLabel: {
+          color: "rgba(255,255,255,.8)",
+          fontSize: 12
+        },
+        data: val.weekCategory
+      },
+      // 下方Y轴
+      yAxis: {
+        name: "工单",
+        nameLocation: "end",
+        nameGap: 24,
+        nameTextStyle: {
+          color: "rgba(255,255,255,.5)",
+          fontSize: 14
+        },
+        max: val.maxData,
+        splitNumber: 4,
+
+        axisLine: {
+          lineStyle: {
+            opacity: 0
+          }
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: "#fff",
+            opacity: 0.1
+          }
+        },
+        axisLabel: {
+          color: "rgba(255,255,255,.8)",
+          fontSize: 12
+        }
+      },
+      series: [
+        {
+          name: "",
+          type: "radar",
+          symbolSize: 0,
+          data: [
+            {
+              value: val.radarDataAvg[6],
+              name: "平均指标",
+              itemStyle: {
+                normal: {
+                  color: "#f8d351"
+                }
+              },
+              lineStyle: {
+                normal: {
+                  opacity: 0
+                }
+              },
+              areaStyle: {
+                normal: {
+                  color: "#f8d351",
+                  shadowBlur: 25,
+                  shadowColor: "rgba(248,211,81,.3)",
+                  shadowOffsetX: 0,
+                  shadowOffsetY: -10,
+                  opacity: 1
+                }
+              }
+            },
+            {
+              value: val.radarData[6],
+              name: "我的指标",
+              itemStyle: {
+                normal: {
+                  color: "#43dfa2"
+                }
+              },
+              lineStyle: {
+                normal: {
+                  opacity: 0
+                }
+              },
+              areaStyle: {
+                normal: {
+                  color: colorList.linearGtoB,
+                  shadowBlur: 15,
+                  shadowColor: "rgba(0,0,0,.2)",
+                  shadowOffsetX: 0,
+                  shadowOffsetY: 5,
+                  opacity: 0.8
+                }
+              }
+            }
+          ]
+        },
+        {
+          name: "",
+          type: "line",
+          smooth: true,
+          symbol: "emptyCircle",
+          symbolSize: 8,
+          itemStyle: {
+            normal: {
+              color: "#fff"
+            }
+          },
+          lineStyle: {
+            normal: {
+              color: colorList.linearBtoG,
+              width: 3
+            }
+          },
+          areaStyle: {
+            normal: {
+              color: colorList.areaBtoG
+            }
+          },
+          data: val.weekLineData,
+          lineSmooth: true,
+          markLine: {
+            silent: true,
+            data: [
+              {
+                type: "average",
+                name: "平均值"
+              }
+            ],
+            precision: 0,
+            label: {
+              normal: {
+                formatter: "平均值: \n {c}"
+              }
+            },
+            lineStyle: {
+              normal: {
+                color: "rgba(248,211,81,.7)"
+              }
+            }
+          },
+          tooltip: {
+            position: "top",
+            formatter: "{c} m",
+            backgroundColor: "rgba(28,152,232,.2)",
+            padding: 6
+          }
+        },
+        {
+          name: "占位背景",
+          type: "bar",
+          itemStyle: {
+            normal: {
+              show: true,
+              color: "#000",
+              opacity: 0
+            }
+          },
+          silent: true,
+          barWidth: "50%",
+          data: val.weekMaxData,
+          animation: false
+        }
+      ]
+    };
+    // 手动触发更新
+    if (chartRef.value) {
+      if (!chartInstance) {
+        chartInstance = echarts.init(chartRef.value);
+      }
+      chartInstance.setOption(options.value);
+    }
+  }, {
+    immediate: true,
+    deep: true
+  });
+</script>
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/overviewLargeScreen/components/bottomRight/chart/index.tsx b/src/views/overviewLargeScreen/components/bottomRight/chart/index.tsx
deleted file mode 100644
index cbab09f..0000000
--- a/src/views/overviewLargeScreen/components/bottomRight/chart/index.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { defineComponent, reactive, onMounted, ref, onUnmounted } from "vue";
-import Draw from "./draw";
-
-export default defineComponent({
-  components: {
-    Draw,
-  },
-  setup() {
-    const drawTiming = ref(0);
-    const cdata = reactive({
-      year: null,
-      weekCategory: [],
-      radarData: [],
-      radarDataAvg: [],
-      maxData: 12000,
-      weekMaxData: [],
-      weekLineData: [],
-    });
-
-    // methods
-    const setData = () => {
-      // 清空轮询数据
-      cdata.weekCategory = [];
-      cdata.weekMaxData = [];
-      cdata.weekLineData = [];
-      cdata.radarData = [];
-      cdata.radarDataAvg = [];
-
-      const dateBase = new Date();
-      cdata.year = dateBase.getFullYear();
-      // 周数据
-      for (let i = 0; i < 7; i++) {
-        // 日期
-        const date = new Date();
-        cdata.weekCategory.unshift(
-          [date.getMonth() + 1, date.getDate() - i].join("/")
-        );
-
-        // 折线图数据
-        cdata.weekMaxData.push(cdata.maxData);
-        const distance = Math.round(Math.random() * 11000 + 500);
-        cdata.weekLineData.push(distance);
-
-        // 雷达图数据
-        // 我的指标
-        const averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
-        const maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
-        const hour = +(distance / 1000 / averageSpeed).toFixed(1);
-        const radarDayData = [distance, averageSpeed, maxSpeed, hour];
-        cdata.radarData.unshift(radarDayData);
-
-        // 平均指标
-        const distanceAvg = Math.round(Math.random() * 8000 + 4000);
-        const averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
-        const maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
-        const hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
-        const radarDayDataAvg = [
-          distanceAvg,
-          averageSpeedAvg,
-          maxSpeedAvg,
-          hourAvg,
-        ];
-        cdata.radarDataAvg.unshift(radarDayDataAvg);
-      }
-    };
-
-    // 定时函数
-    const drawTimingFn = () => {
-      setData();
-      drawTiming.value = setInterval(() => {
-        setData();
-      }, 6000);
-    };
-
-    // 生命周期
-    onMounted(() => {
-      drawTimingFn();
-    });
-
-    onUnmounted(() => {
-      clearInterval(drawTiming.value);
-    });
-
-    return () => {
-      return (
-        <div>
-          <Draw cdata={cdata} />
-        </div>
-      );
-    };
-  },
-});
diff --git a/src/views/overviewLargeScreen/components/bottomRight/chart/index.vue b/src/views/overviewLargeScreen/components/bottomRight/chart/index.vue
new file mode 100644
index 0000000..08d11a0
--- /dev/null
+++ b/src/views/overviewLargeScreen/components/bottomRight/chart/index.vue
@@ -0,0 +1,81 @@
+<template>
+    <Draw :cdata="cdata" />
+</template>
+<script setup lang="tsx">
+import Draw from "./draw.vue";
+import { onMounted, onUnmounted, reactive,ref } from "vue";
+
+const drawTiming:any = ref(0);
+const cdata = reactive({
+  year: null,
+  weekCategory: [],
+  radarData: [],
+  radarDataAvg: [],
+  maxData: 12000,
+  weekMaxData: [],
+  weekLineData: [],
+});
+
+const setData = () => {
+  // 清空轮询数据
+  cdata.weekCategory = [];
+  cdata.weekMaxData = [];
+  cdata.weekLineData = [];
+  cdata.radarData = [];
+  cdata.radarDataAvg = [];
+
+  const dateBase = new Date();
+  cdata.year = dateBase.getFullYear();
+  // 周数据
+  for (let i = 0; i < 7; i++) {
+    // 日期
+    const date = new Date();
+    cdata.weekCategory.unshift(
+      [date.getMonth() + 1, date.getDate() - i].join("/")
+    );
+
+    // 折线图数据
+    cdata.weekMaxData.push(cdata.maxData);
+    const distance = Math.round(Math.random() * 11000 + 500);
+    cdata.weekLineData.push(distance);
+
+    // 雷达图数据
+    // 我的指标
+    const averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
+    const maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
+    const hour = +(distance / 1000 / averageSpeed).toFixed(1);
+    const radarDayData = [distance, averageSpeed, maxSpeed, hour];
+    cdata.radarData.unshift(radarDayData);
+
+    // 平均指标
+    const distanceAvg = Math.round(Math.random() * 8000 + 4000);
+    const averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
+    const maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
+    const hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
+    const radarDayDataAvg = [
+      distanceAvg,
+      averageSpeedAvg,
+      maxSpeedAvg,
+      hourAvg,
+    ];
+    cdata.radarDataAvg.unshift(radarDayDataAvg);
+  }
+};
+
+const drawTimingFn = () => {
+  setData();
+  drawTiming.value = setInterval(() => {
+    setData();
+  }, 6000);
+};
+
+onMounted(() => {
+  drawTimingFn();
+});
+onUnmounted(() => {
+  clearInterval(drawTiming.value);
+});
+</script>
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/overviewLargeScreen/components/bottomRight/index.vue b/src/views/overviewLargeScreen/components/bottomRight/index.vue
index 1832a00..52abcc1 100644
--- a/src/views/overviewLargeScreen/components/bottomRight/index.vue
+++ b/src/views/overviewLargeScreen/components/bottomRight/index.vue
@@ -6,7 +6,7 @@
           <i class="iconfont icon-chart-area" />
         </span>
         <div class="d-flex">
-          <span class="fs-xl text mx-2 mt-1">数据统计图</span>
+          <span class="fs-xl text mx-2 mt-1">数据统计图123132</span>
         </div>
       </div>
       <div>
@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-  import Chart from "./chart/index";
+  import Chart from "./chart/index.vue";
 </script>
 
 <style lang="scss" class>
diff --git a/src/views/overviewLargeScreen/components/centerLeft1/chart/draw.tsx b/src/views/overviewLargeScreen/components/centerLeft1/chart/draw.tsx
deleted file mode 100644
index 5319c92..0000000
--- a/src/views/overviewLargeScreen/components/centerLeft1/chart/draw.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { defineComponent, ref, watch, shallowReactive } from 'vue'
-
-// 声明类型
-const PropsType = {
-  cdata: {
-    type: Object,
-    require: true
-  }
-} as const
-
-// 定义主体
-export default defineComponent({
-  props: PropsType,
-  setup(props) {
-    // 定义 ref
-    const chartRef = ref()
-    // 配置项
-    let options = shallowReactive({color:null,tooltip:null,toolbox:null,calculable:null,legend:null,series:null})
-
-    watch(
-      () => props.cdata,
-      (val: any) => {
-        options = {
-          color: [
-            '#37a2da',
-            '#32c5e9',
-            '#9fe6b8',
-            '#ffdb5c',
-            '#ff9f7f',
-            '#fb7293',
-            '#e7bcf3',
-            '#8378ea'
-          ],
-          tooltip: {
-            trigger: 'item',
-            formatter: '{a} <br/>{b} : {c} ({d}%)'
-          },
-          toolbox: {
-            show: true
-          },
-          calculable: true,
-          legend: {
-            orient: 'horizontal',
-            icon: 'circle',
-            bottom: 0,
-            x: 'center',
-            data: val.xData,
-            textStyle: {
-              color: '#fff'
-            }
-          },
-          series: [
-            {
-              name: '通过率统计',
-              type: 'pie',
-              radius: [10, 50],
-              roseType: 'area',
-              center: ['50%', '40%'],
-              itemStyle: {
-                borderRadius: 5
-              },
-              label: {
-                show: true,
-                color: "#fff",
-              },
-              emphasis: {
-                label: {
-                  show: false
-                }
-              },
-              data: val.seriesData
-            }
-          ]
-        }
-        // 手动触发更新
-        if (chartRef.value) {
-          // 通过初始化参数打入数据
-          chartRef.value.initChart(options)
-        }
-      },
-      {
-        immediate: true,
-        deep: true
-      }
-    )
-
-    return () => {
-      const height = "220px"
-      const width = "260px"
-
-      return <div>
-        <echart ref={chartRef} options={options} height={height} width={width} />
-      </div>
-    }
-  }
-})
-
diff --git a/src/views/overviewLargeScreen/components/centerLeft1/chart/draw.vue b/src/views/overviewLargeScreen/components/centerLeft1/chart/draw.vue
new file mode 100644
index 0000000..132ed59
--- /dev/null
+++ b/src/views/overviewLargeScreen/components/centerLeft1/chart/draw.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :style="{ height, width }" ref="chartRef"></div>
+</template>
+
+<script setup lang="ts">
+  import { ref, shallowReactive, watch } from "vue";
+  import * as echarts from "echarts";
+
+
+  const height = "220px";
+  const width = "260px";
+  const props = defineProps<{
+    cdata: {
+      xData: string[],
+      seriesData: {
+        value: number,
+        name: string
+      }[]
+    };
+  }>();
+
+  // 定义 ref
+  const chartRef = ref();
+
+  // 配置项
+  let options = shallowReactive({ color: null, tooltip: null, toolbox: null, calculable: null, legend: null, series: null });
+  // echarts 实例
+  let chartInstance: echarts.ECharts | null = null;
+  watch(
+    () => props.cdata,
+    (val: any) => {
+      options = {
+        color: [
+          "#37a2da",
+          "#32c5e9",
+          "#9fe6b8",
+          "#ffdb5c",
+          "#ff9f7f",
+          "#fb7293",
+          "#e7bcf3",
+          "#8378ea"
+        ],
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        toolbox: {
+          show: true
+        },
+        calculable: true,
+        legend: {
+          orient: "horizontal",
+          icon: "circle",
+          bottom: 0,
+          x: "center",
+          data: val.xData,
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        series: [
+          {
+            name: "通过率统计",
+            type: "pie",
+            radius: [10, 50],
+            roseType: "area",
+            center: ["50%", "40%"],
+            itemStyle: {
+              borderRadius: 5
+            },
+            label: {
+              show: true,
+              color: "#fff"
+            },
+            emphasis: {
+              label: {
+                show: false
+              }
+            },
+            data: val.seriesData
+          }
+        ]
+      };
+      // // 手动触发更新
+      // if (chartRef.value) {
+      //   // 通过初始化参数打入数据
+      //   chartRef.value.initChart(options)
+      // }
+      // 手动触发更新
+      if (chartRef.value) {
+        if (!chartInstance) {
+          chartInstance = echarts.init(chartRef.value);
+        }
+        chartInstance.setOption(options);
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  );
+</script>
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/overviewLargeScreen/components/centerLeft1/chart/index.tsx b/src/views/overviewLargeScreen/components/centerLeft1/chart/index.tsx
deleted file mode 100644
index 2467467..0000000
--- a/src/views/overviewLargeScreen/components/centerLeft1/chart/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { defineComponent, onUnmounted, reactive } from 'vue'
-import Draw from './draw'
-
-export default defineComponent({
-  components: {
-    Draw,
-  },
-  setup() {
-    let intervalInstance = null
-    const cdata = reactive({
-      xData: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6'],
-      seriesData: [
-        { value: 10, name: '数据1' },
-        { value: 5, name: '数据2' },
-        { value: 15, name: '数据3' },
-        { value: 25, name: '数据4' },
-        { value: 20, name: '数据5' },
-        { value: 35, name: '数据6' },
-      ],
-    })
-    intervalInstance = setInterval(() => {
-      const data = cdata.seriesData
-      cdata.seriesData = data.map((e) => {
-        return { value: e.value + 10, name: e.name }
-      })
-    }, 1000)
-
-    onUnmounted(() => {
-      clearInterval(intervalInstance)
-    })
-    return () => {
-      return (
-        <div>
-          <Draw cdata={cdata} />
-        </div>
-      )
-    }
-  },
-})
diff --git a/src/views/overviewLargeScreen/components/centerLeft1/chart/index.vue b/src/views/overviewLargeScreen/components/centerLeft1/chart/index.vue
new file mode 100644
index 0000000..8b8a9da
--- /dev/null
+++ b/src/views/overviewLargeScreen/components/centerLeft1/chart/index.vue
@@ -0,0 +1,39 @@
+
+<template>
+  <div>
+    <Draw :cdata=cdata />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { onUnmounted, reactive } from "vue";
+  import Draw from './draw.vue'
+  let intervalInstance = null
+
+  const cdata = reactive({
+    xData: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6'],
+    seriesData: [
+      { value: 10, name: '数据1' },
+      { value: 5, name: '数据2' },
+      { value: 15, name: '数据3' },
+      { value: 25, name: '数据4' },
+      { value: 20, name: '数据5' },
+      { value: 35, name: '数据6' },
+    ],
+  })
+
+  intervalInstance = setInterval(() => {
+    const data = cdata.seriesData
+    cdata.seriesData = data.map((e) => {
+      return { value: e.value + 10, name: e.name }
+    })
+  }, 1000)
+
+  onUnmounted(() => {
+    clearInterval(intervalInstance)
+  })
+</script>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/overviewLargeScreen/components/centerLeft1/index.vue b/src/views/overviewLargeScreen/components/centerLeft1/index.vue
index 53b527d..9ce46a1 100644
--- a/src/views/overviewLargeScreen/components/centerLeft1/index.vue
+++ b/src/views/overviewLargeScreen/components/centerLeft1/index.vue
@@ -42,14 +42,14 @@
 
 <script lang="ts">
   import { defineComponent, onMounted, onUnmounted, reactive } from "vue";
-  import Chart from "./chart/index";
+  import Chart from "./chart/index.vue";
   export default defineComponent({
     components: {
       Chart,
     },
     setup() {
       // 下层数据
-      const dataArr = [
+      const dataArr = reactive([
         {
           number: 150,
           text: "今日构建总量",
@@ -66,7 +66,7 @@
           number: 571,
           text: "未通过数量",
         },
-      ];
+      ]);
       // 对应图标
       const iconFont = [
         "icon-diagnose",
@@ -74,8 +74,8 @@
         "icon-cloudupload",
         "icon-clouddownload",
       ];
-      const numberData = reactive([]);
-      let intervalInstance = null;
+      const numberData:any = reactive([]);
+      let intervalInstance:any = null;
       onMounted(() => {
         setData();
         changeTiming();
@@ -93,7 +93,7 @@
               },
             },
             text: e.text,
-          });
+          } );
         });
       };
 
@@ -103,7 +103,7 @@
         }, 2000);
       };
       const changeNumber = () => {
-        numberData.forEach((item, index) => {
+        numberData.forEach((item:any, index:any) => {
           item.config.number[0] += ++index;
           item.config = { ...item.config };
         });
diff --git a/src/views/overviewLargeScreen/components/centerRight1/chart/draw.tsx b/src/views/overviewLargeScreen/components/centerRight1/chart/draw.tsx
deleted file mode 100644
index 3211a60..0000000
--- a/src/views/overviewLargeScreen/components/centerRight1/chart/draw.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-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({radar:null,series:null})
-
-    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
-                }
-              }
-            }
-          ]
-        }
-      },
-      {
-        immediate: true,
-        deep: true
-      }
-    )
-
-    return () => {
-      const height = "200px"
-      const width = "260px"
-
-      return <div>
-        <echart options={options} height={height} width={width} />
-      </div>
-    }
-  }
-})
-
diff --git a/src/views/overviewLargeScreen/components/centerRight1/chart/draw.vue b/src/views/overviewLargeScreen/components/centerRight1/chart/draw.vue
new file mode 100644
index 0000000..55d40a1
--- /dev/null
+++ b/src/views/overviewLargeScreen/components/centerRight1/chart/draw.vue
@@ -0,0 +1,143 @@
+
+<template>
+  <div :style="{ height, width }"  ref="chartRef"></div>
+</template>
+<script setup lang="ts">
+  import { shallowReactive, watch,ref } from "vue";
+  import * as echarts from "echarts";
+
+  const props = defineProps<{
+    cdata: {
+      indicatorData: {
+        name:string,
+        max:number
+      },
+      dataBJ:number[][]
+      dataGZ: number[][]
+      dataSH:number[][]
+    };
+  }>();
+
+  // 定义固定配置项
+  const lineStyle = {
+    normal: {
+      width: 1,
+      opacity: 0.5
+    }
+  };
+  // 配置项
+  let options = shallowReactive({radar:null,series:null})
+
+  // 定义 ref
+  const chartRef = ref();
+  const height = "200px"
+  const width = "260px"
+  // echarts 实例
+  let chartInstance: echarts.ECharts | null = null;
+  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
+              }
+            }
+          }
+        ]
+      }
+      if (chartRef.value) {
+        if (!chartInstance) {
+          chartInstance = echarts.init(chartRef.value);
+        }
+        chartInstance.setOption(options);
+      }
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  )
+</script>
+
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/overviewLargeScreen/components/centerRight1/chart/index.tsx b/src/views/overviewLargeScreen/components/centerRight1/chart/index.tsx
deleted file mode 100644
index ea3ba66..0000000
--- a/src/views/overviewLargeScreen/components/centerRight1/chart/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-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>
-    }
-  }
-})
\ No newline at end of file
diff --git a/src/views/overviewLargeScreen/components/centerRight1/chart/index.vue b/src/views/overviewLargeScreen/components/centerRight1/chart/index.vue
new file mode 100644
index 0000000..47f6b8f
--- /dev/null
+++ b/src/views/overviewLargeScreen/components/centerRight1/chart/index.vue
@@ -0,0 +1,62 @@
+<template>
+  <Draw :cdata=cdata />
+</template>
+<script setup lang="ts">
+
+
+  import Draw from "./draw.vue";
+  import { onUnmounted,reactive } from "vue";
+
+  let intervalInstance = null;
+  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]
+    ]
+  });
+  intervalInstance = setInterval(() => {
+    const data = cdata.indicatorData as any;
+    cdata.indicatorData = data.map((e) => {
+      return { value: e.max, name: e.name };
+    });
+  }, 1000);
+  onUnmounted(() => {
+    clearInterval(intervalInstance);
+  });
+</script>
+
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/src/views/overviewLargeScreen/components/centerRight1/index.vue b/src/views/overviewLargeScreen/components/centerRight1/index.vue
index 8a2411c..ef02fa5 100644
--- a/src/views/overviewLargeScreen/components/centerRight1/index.vue
+++ b/src/views/overviewLargeScreen/components/centerRight1/index.vue
@@ -20,8 +20,7 @@
 
 <script setup lang="ts">
   import { reactive } from "vue";
-  import Chart from "./chart/index.tsx";
-
+  import Chart from "./chart/index.vue";
   const config = reactive({
     data: [
       { name: "南阳", value: 167 },
diff --git a/src/views/overviewLargeScreen/constant/index.ts b/src/views/overviewLargeScreen/constant/index.ts
index ea148ae..6d0507a 100644
--- a/src/views/overviewLargeScreen/constant/index.ts
+++ b/src/views/overviewLargeScreen/constant/index.ts
@@ -7,7 +7,7 @@ export const WEEK = ["周日", "周一", "周二", "周三", "周四", "周五",
 
 // 主题名称与副标题名称
 export const title = "大数据可视化平台";
-export const subtitle = ["数据分析1", "数据分析2", "vue-big-screen"];
+export const subtitle = ["数据分析1", "数据分析2", "数据分析3"];
 
 export const moduleInfo: ModuleInfo = [
   // 中间的几个模块
diff --git a/src/views/overviewLargeScreen/index.vue b/src/views/overviewLargeScreen/index.vue
index 03040a5..20cd72b 100644
--- a/src/views/overviewLargeScreen/index.vue
+++ b/src/views/overviewLargeScreen/index.vue
@@ -64,7 +64,7 @@
             <div class="content-box">
               <div>
                 <dv-border-box-12>
-                  <!-- <CenterLeft1 /> -->
+                   <CenterLeft1 />
                 </dv-border-box-12>
               </div>
               <div>
@@ -78,7 +78,7 @@
               </div>
               <!-- 中间 -->
               <div>
-                <!-- <CenterRight1 /> -->
+                 <CenterRight1 />
               </div>
               <div>
                 <dv-border-box-13>
@@ -93,7 +93,7 @@
                 <BottomLeft />
               </dv-border-box-13>
               <dv-border-box-12>
-                <!-- <BottomRight /> -->
+                 <BottomRight />
               </dv-border-box-12>
             </div>
           </div>
@@ -111,14 +111,14 @@
   import { title, subtitle, moduleInfo } from "./constant/index";
   // 有用的 已修改的组件
   import BottomLeft from "./components/bottomLeft/index.vue";
+  import BottomRight from './components/bottomRight/index.vue'
   import CenterRight2 from "./components/centerRight2/index.vue";
-
+  import CenterLeft1 from './components/centerLeft1/index.vue'
+  import CenterRight1 from "./components/centerRight1/index.vue";
   // 未修改的组件
-  // import CenterLeft1 from "./components/centerLeft1/index.vue";
   // import CenterLeft2 from "./components/centerLeft2/index.vue";
   // import Center from "./components/center/index.vue";
-  // import CenterRight1 from "./components/centerRight1/index.vue";
-  // import BottomRight from "./components/bottomRight/index.vue";
+
 
   // * 颜色
   const decorationColors = ["#568aea", "#000000"];