diff --git a/src/components/baozuo-demo/BottomCharts.vue b/src/components/baozuo-demo/BottomCharts.vue
index a9c3e26..f763195 100644
--- a/src/components/baozuo-demo/BottomCharts.vue
+++ b/src/components/baozuo-demo/BottomCharts.vue
@@ -70,7 +70,7 @@ export default {
             </div>
           `;
           } else {
-            color = '#1e80ff';
+            color = '#08e5ff';
             content = `${percentage}%`;
             return `
             <div class="circle-progress" style="border-color: ${color}; ">
@@ -203,7 +203,8 @@ export default {
     height: 50px;
     text-align: center;
     line-height: 50px;
-    font-size: 20px;
+    font-size: 30px;
+    font-weight: bold;
   }
 
   .dv-active-ring-chart {
diff --git a/src/components/baozuo-demo/CenterCmp.vue b/src/components/baozuo-demo/CenterCmp.vue
index 196fd79..1d38dd3 100644
--- a/src/components/baozuo-demo/CenterCmp.vue
+++ b/src/components/baozuo-demo/CenterCmp.vue
@@ -15,24 +15,26 @@
     <div class="cc-main-container">
       <div class="ccmc-left">
         <div class="ccmc-title">
-            测试数据可视化模型
+            订单信息
         </div>
         <div class="ccmc-items">
           <div class="station-info" v-for="(item, index) in leftData" :key="index">
-          <img :src="item.icon" alt="icon" class="station-icon">
-          <div class="station-value">{{ item.value }}</div>
-          <div class="station-name">{{ item.name }}</div>
-         
-        </div>
+            <img :src="item.icon" alt="icon" class="station-icon">
+            <div class="station-value">{{ item.value }}</div>
+            <div class="station-name">{{ item.name }}</div>
+          </div>
         </div>
        
       </div>
 
-      <dv-active-ring-chart class="ccmc-middle" :config="config" />
+      <!-- <dv-active-ring-chart class="ccmc-middle" :config="config" /> -->
+       <div class="ccmc-middle">
+        <PieChart></PieChart>
+       </div>
 
       <div class="ccmc-right">
         <div class="ccmc-title">
-          测试数据可视化模型2
+          保养及备料信息
         </div>
         <!-- <div class="ccmc-items">
           <div class="station-info" v-for="(item, index) in rightData" :key="index">
@@ -41,11 +43,42 @@
             <div class="station-value">{{ item.value }}</div>
           </div>
         </div> -->
-        <PieChart></PieChart>
+       
+        <!-- <div class="right-box-items">
+          <div class="rbi-info" v-for="(item, index) in rightData" :key="index">
+            <img :src="item.icon" alt="icon" class="rbi-icon">
+            <div class="rbi-text">
+              <div class="rbi-name">{{ item.name }}</div>
+              <div class="rbi-value">{{ item.value }}</div>
+            </div>
+          </div>
+        </div> -->
         
+        <div class="right-container-new">
+          <!-- 第一行 -->
+          <div class="first-row">
+            <img src="../../img/icons/15.png" class="fc-icon">
+            <!-- <div class="first-content">
+              <p class="fc-name">{{ rightData[0].name }}</p>
+              <p class="fc-value">{{ rightData[0].value }}</p>
+            </div> -->
+          </div>
+          <!-- 第二行 -->
+          <div class="second-row">
+            <div 
+              class="item-card" 
+              v-for="(item, index) in rightData" 
+              :key="index"
+            >
+              <img :src="item.icon" class="sc-icon">
+              <p class="sc-name">{{ item.name }}</p>
+              <p class="sc-value">{{ item.value }}</p>
+            </div>
+          </div>
+        </div>
       </div>
 
-      <LabelTag :config="labelConfig" />
+      <!-- <LabelTag :config="labelConfig" /> -->
     </div>
   </div>
 </template>
@@ -67,15 +100,18 @@ export default {
   data () { 
     // 定义原始数据
     const originalLeftData = [
-      { icon: require(`@/img/icons/1.png`), name: '本月派工数', value: '1120' },
-      { icon: require(`@/img/icons/2.png`), name: '本月未完成派工数', value: '600' },
-      { icon: require(`@/img/icons/3.png`), name: '本月派工完成率', value: '60%' }
+      
+      { icon: require(`@/img/icons/1.png`), name: '本月订单数', value: '1120' },
+      { icon: require(`@/img/icons/2.png`), name: '本月派工数', value: '600' },
+      { icon: require(`@/img/icons/3.png`), name: '本月派工未完成数', value: '60%' },
+      { icon: require(`@/img/icons/3.png`), name: '本月派工完成率', value: '100%' }
     ];
 
     const originalRightData = [
-      { icon: require(`@/img/icons/6.png`), name: '今天产量', value: '60' },
-      { icon: require(`@/img/icons/7.png`), name: '直通率', value: '93%' },
-      { icon: require(`@/img/icons/8.png`), name: '今日不良数', value: '2' }
+      { icon: require(`@/img/icons/12.png`), name: '保养台数', value: '20' },
+      { icon: require(`@/img/icons/12.png`), name: '直通率', value: '100%' },
+      { icon: require(`@/img/icons/12.png`), name: '机芯备料进度', value: '98/100' },
+      { icon: require(`@/img/icons/12.png`), name: '盖板备料进度', value: '99/100' }
     ];
 
     // 将数值加倍（支持多次加倍）
@@ -91,45 +127,46 @@ export default {
     // 第一次加倍
     const doubledLeftData = originalLeftData.map(item => ({
       ...item,
-      value: doubleValue(item.value)
+      value: item.value
     }));
 
     const doubledRightData = originalRightData.map(item => ({
       ...item,
-      value: doubleValue(item.value)
+      value: item.value
     }));
 
     // 第二次加倍
     const quadrupledLeftData = doubledLeftData.map(item => ({
       ...item,
-      value: doubleValue(item.value)
+      value: item.value
     }));
 
     const quadrupledRightData = doubledRightData.map(item => ({
       ...item,
-      value: doubleValue(item.value)
+      value: item.value
     }));
 
     return {
       config: {
         data: [
           {
-            name: '机芯缺陷占比',
+            name: '机芯产量',
             value: 42
           },
           {
-            name: '盖板缺陷占比',
+            name: '盖板产量',
             value: 58
           }
         ],
         color: ['#00baff', '#3de7c9', '#ffc530', '#469f4b'],
-        lineWidth: 30,
+        lineWidth: 40,
         radius: '55%',
         activeRadius: '60%'
       },
 
       labelConfig: {
-        data: ['机芯缺陷占比', '盖板缺陷占比']
+        
+        data: ['机芯产量', '盖板产量']
       },
 
       leftData: quadrupledLeftData,
@@ -149,14 +186,15 @@ export default {
   flex-direction: column;
 
   .station-icon {
-    width: 220px;
+    width: 190px;
     // height: 80px;
     // margin-bottom: 18px;
   }
 
   .station-name {
-    font-size: 25px;
-    color: #0777e0;
+    font-size: 23px;
+    font-weight: bold;
+    color: #ffffff;
     text-align: center;
     margin-bottom: 4px;
   }
@@ -164,7 +202,7 @@ export default {
   .station-value {
     font-size: 30px;
     font-weight: bold;
-    color: #ffffff;
+    color: #08e5ff;
     text-align: center;
   }
 
@@ -231,9 +269,10 @@ export default {
         box-sizing: border-box;
         top: 120px;
         // left: 50px;
-        padding:0 80px;
+        // padding:0 80px;
         display: flex;
-        justify-content: space-between;
+        justify-content: space-around;
+        padding-right: 20px;
         .station-info {
           display: flex;
           flex-direction: column;
@@ -241,6 +280,39 @@ export default {
           margin: 10px 0;
         }
       }
+      .right-box-items{
+        position: absolute;
+        top: 140px;
+        display: flex;
+        flex-wrap: wrap;
+        font-size: 18px;
+        padding-left: 20px;
+        padding-right: 30px;
+        .rbi-info{
+          width: 50%;
+          display: flex;
+          align-items: center;
+          .rbi-icon{
+            width: 180px;
+          }
+          .rbi-text{
+            // margin-top: 40px;
+            .rbi-value{
+              font-size: 35px;
+              color: #08e5ff;
+              font-weight: bold;
+              text-align: center;
+              margin-bottom: 4px;
+            }
+            .rbi-name{
+              font-size: 25px;
+              color: #ffffff;
+              font-weight: bold;
+              text-align: center;
+            }
+          }
+        }
+      }
      
     }
 
@@ -257,9 +329,91 @@ export default {
     position: absolute;
     width: 500px;
     height: 30px;
-    bottom: 10px;
+    bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
   }
+  .right-container-new {
+    position: absolute;
+    top: 130px;
+    width: 100%;
+    display: flex;
+    // flex-direction: column;
+    // gap: 20px;
+    padding: 20px;
+    p{margin: 0;}
+      .first-row {
+          display: flex;
+          align-items: center;
+          // gap: 15px;
+          // padding: 15px;
+        }
+
+        .first-content {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .second-row {
+          display: flex;
+          flex-wrap: wrap;
+          // justify-content: space-between;
+          gap: 15px;
+          padding: 0 70px 0 20px;
+        }
+
+        .item-card {
+          width: 175px;
+          // flex: 1;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding: 15px;
+          background-image: linear-gradient(
+            to bottom,
+            rgba(33, 150, 243, 0.15),  /* 蓝色透明度15% */
+            rgba(158, 158, 158, 0.15)  /* 灰色透明度15% */
+          );
+          border: none; /* 移除原有边框 */
+          box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 添加柔和阴影提升层次 */
+          border-radius:20px;
+          }
+
+        .fc-icon {
+          width: 300px;
+          height: 300px;
+          object-fit: cover;
+        }
+        .fc-name{
+          font-size: 40px;
+          color: #ffffff;
+          font-weight: bold;
+        }
+        .fc-value{
+          font-size: 60px;
+          text-align: center;
+          color: #08e5ff;
+          font-weight: bold;
+        }
+        .sc-name{
+          font-size:25px;
+          color: #ffffff;
+          font-weight: bold;
+        }
+        .sc-value{
+          font-size: 35px;
+          text-align: center;
+          color: #08e5ff;
+          font-weight: bold;
+        }
+        .sc-icon {
+          width: 50px;
+          height: 50px;
+          object-fit: cover;
+          border-radius: 6px;
+        }
+    }
+
+    
 }
 </style>
\ No newline at end of file
diff --git a/src/components/baozuo-demo/LabelTag.vue b/src/components/baozuo-demo/LabelTag.vue
index 6d270e4..0e24fe8 100644
--- a/src/components/baozuo-demo/LabelTag.vue
+++ b/src/components/baozuo-demo/LabelTag.vue
@@ -67,7 +67,7 @@ export default {
 
   .label-item {
     margin: 5px;
-    font-size: 15px;
+    font-size: 20px;
     display: flex;
     align-items: center;
 
diff --git a/src/components/baozuo-demo/pieChart.vue b/src/components/baozuo-demo/pieChart.vue
index b81723f..0250f1d 100644
--- a/src/components/baozuo-demo/pieChart.vue
+++ b/src/components/baozuo-demo/pieChart.vue
@@ -1,6 +1,35 @@
 <template>
-    <div id="pie-chart" style="height: 100%;width: 100%;">
+    <div id="pie-chart" style="height: 100%;width: 100%;position: relative;">
       <div id="pieId-new" class="pie-chart-container"></div>
+      <div class="item-box" style="top: 100px;left: 0;text-align: right;">
+        <div class="item-value-box" style="justify-content: flex-end;">
+          <p class="item-value" style="color: #f8ffff;">{{ testchartData[0].value }}</p>
+          <div class="triangle-left" style="border-right:20px solid #f8ffff;"></div> 
+        </div>
+        <p class="item-name">{{ testchartData[0].name }}</p>
+      </div>
+      <div class="item-box" style="top: 300px;left: 0;text-align: right;">  
+        <div class="item-value-box" style="justify-content: flex-end;">
+          <p class="item-value" style="color: #88a8f4;">{{ testchartData[1].value }}</p>
+          <div class="triangle-left" style="border-right:20px solid #88a8f4;"></div> 
+        </div>
+        <p class="item-name">{{ testchartData[1].name }}</p>
+      
+      </div>
+      <div class="item-box" style="top: 100px;right: 0;text-align: left;">
+        <div class="item-value-box">
+          <div class="triangle-right" style="border-left:20px solid #ffdc9d;"></div> 
+          <p class="item-value" style="color: #ffdc9d;">{{ testchartData[2].value }}</p>
+        </div>
+        <p class="item-name">{{ testchartData[2].name }}</p>
+      </div>
+      <div class="item-box" style="top: 300px;right: 0;">
+        <div class="item-value-box">
+          <div class="triangle-right" style="border-left:20px solid #eb7e41;"></div> 
+          <p class="item-value" style="color: #eb7e41;">{{ testchartData[3].value }}</p>
+        </div>
+        <p class="item-name">{{ testchartData[3].name }}</p>
+      </div>
     </div>
   </template>
   
@@ -20,6 +49,24 @@
     },
     data() {
       return {
+        testchartData:[
+        {
+            value: 520,
+            name: "机芯产量",
+            },
+            {
+            value: 280,
+            name: "盖板产量",
+            },
+            {
+            value: 100,
+            name: "整机产量",
+            },
+            {
+            value: 100,
+            name: "组件产量",
+            },
+        ],
         option: {}
       }
     },
@@ -35,75 +82,63 @@
         const chartData = [
             {
             value: 520,
-            name: "保养台数",
+            name: "机芯产量",
             },
             {
             value: 280,
-            name: "今天产量",
+            name: "盖板产量",
             },
             {
             value: 100,
-            name: "直通率",
+            name: "整机产量",
             },
             {
             value: 100,
-            name: "今日不良数",
-            },
-            {
-            value: 100,
-            name: "返工数",
-            },
-            {
-            value: 100,
-            name: "机芯备料进度",
-            },
-            {
-            value: 100,
-            name: "盖板备料进度",
+            name: "组件产量",
             },
         ];
         const colorList = [
-        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        {
-            offset: 0,
-            color: "#CA8CCA",
-        },
-        {
-            offset: 1,
-            color: "#8A2BE2",
-        },
-        ]),
-        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        {
-            offset: 0,
-            color: "#FF3333",
-        },
-        {
-            offset: 1,
-            color: "#FF3333",
-        },
-        ]),
-        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        {
-            offset: 0,
-            color: "#A8AAE5",
-        },
-        {
-            offset: 1,
-            color: "#BEA3E3",
-        },
-        ]),
-        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-        {
-            offset: 0,
-            color: "#F0F4F8",
-        },
-        {
-            offset: 1,
-            color: "#E5F2A7",
-        },
-        ]),
-        '#FF6B35','#2ECC71','#CCD6DD',
+        // new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        // {
+        //     offset: 0,
+        //     color: "#CA8CCA",
+        // },
+        // {
+        //     offset: 1,
+        //     color: "#8A2BE2",
+        // },
+        // ]),
+        // new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        // {
+        //     offset: 0,
+        //     color: "#FF3333",
+        // },
+        // {
+        //     offset: 1,
+        //     color: "#FF3333",
+        // },
+        // ]),
+        // new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        // {
+        //     offset: 0,
+        //     color: "#A8AAE5",
+        // },
+        // {
+        //     offset: 1,
+        //     color: "#BEA3E3",
+        // },
+        // ]),
+        // new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        // {
+        //     offset: 0,
+        //     color: "#F0F4F8",
+        // },
+        // {
+        //     offset: 1,
+        //     color: "#E5F2A7",
+        // },
+        // ]),
+        '#f8ffff','#88a8f4','#ffdc9d','#eb7e41'
         ];
         const sum = chartData.reduce((per, cur) => per + cur.value, 0);
         const gap = (1 * sum) / 100;
@@ -136,9 +171,9 @@
         itemStyle: {
             borderRadius: 10,
             color: colorList[i],
-            opacity: 0.1,
+            opacity: 0.2,
             shadowColor: "#000",
-            shadowBlur: 1,
+            shadowBlur: 3,
             shadowOffsetY: 5,
             shadowOffsetX: 0,
         },
@@ -150,8 +185,8 @@
             title: [
                 {
                 text: sum,
-                x: "30%",
-                y: "43%",
+                x: "50%",
+                y: "40%",
                 textAlign: "center",
                 textStyle: {
                     fontSize: "50",
@@ -165,9 +200,9 @@
                 },
                 },
                 {
-                text: "数据展示",
-                left: "30%",
-                top: "52%",
+                text: "总产量",
+                left: "50%",
+                top: "55%",
                 textAlign: "center",
                 textStyle: {
                     fontSize: "25",
@@ -181,49 +216,49 @@
                 },
                 },
             ],
-            legend: {
-                right: "10%",
-                top: 'middle',
-                align: "left",
-                width:'200',
-                // orient: 'vertical',
-                itemGap: 30,
-                itemWidth: 20,
-                itemHeight: 20,
-                shadowBlur: 10,
-                shadowOffsetY: 0,
-                shadowOffsetX: 0,
-                borderColor: "#2a2a34",
-                borderWidth: 2,
-                textStyle: {
-                color: "#D8DDE3",
-                rich: {
-                    name: {
-                    verticalAlign: "right",
-                    align: "left",
-                    fontSize: 24,
-                    color: "#D8DDE3",
-                    },
-                    percent: {
-                    padding: [0, 0, 0, 10],
-                    color: "#08e5ff",
-                    fontSize: 25,
-                    fontWeight:'bold'
-                    },
-                },
-                },
-                formatter: (name) => {
-                const item = chartData.find((i) => {
-                    return i.name === name;
-                });
-                //是否计算为百分比
-                // const p = ((item.value / sum) * 100).toFixed(0);
-                // return "{name|" + name + "}" + "{percent|" + p + "}" + " %";
+            // legend: {
+            //     right: "10%",
+            //     top: 'middle',
+            //     align: "left",
+            //     width:'200',
+            //     // orient: 'vertical',
+            //     itemGap: 30,
+            //     itemWidth: 20,
+            //     itemHeight: 20,
+            //     shadowBlur: 10,
+            //     shadowOffsetY: 0,
+            //     shadowOffsetX: 0,
+            //     borderColor: "#2a2a34",
+            //     borderWidth: 2,
+            //     textStyle: {
+            //     color: "#D8DDE3",
+            //     rich: {
+            //         name: {
+            //         verticalAlign: "right",
+            //         align: "left",
+            //         fontSize: 24,
+            //         color: "#D8DDE3",
+            //         },
+            //         percent: {
+            //         padding: [0, 0, 0, 10],
+            //         color: "#08e5ff",
+            //         fontSize: 25,
+            //         fontWeight:'bold'
+            //         },
+            //     },
+            //     },
+            //     formatter: (name) => {
+            //     const item = chartData.find((i) => {
+            //         return i.name === name;
+            //     });
+            //     //是否计算为百分比
+            //     // const p = ((item.value / sum) * 100).toFixed(0);
+            //     // return "{name|" + name + "}" + "{percent|" + p + "}" + " %";
                 
-                // const p = ((item.value / sum) * 100).toFixed(0);
-                return "{name|" + name + "}" + "{percent|" + item.value + "}";
-                },
-            },
+            //     // const p = ((item.value / sum) * 100).toFixed(0);
+            //     return "{name|" + name + "}" + "{percent|" + item.value + "}";
+            //     },
+            // },
 
             color: colorList,
 
@@ -232,8 +267,8 @@
                 type: "pie",
                 z: 3,
                 roundCap: true,
-                radius: ["44%", "51%"],
-                center: ["30%", "50%"],
+                radius: ["60%", "50%"],
+                // center: ["30%", "50%"],
                 label: {
                     show: false,
                 },
@@ -245,8 +280,8 @@
                 {
                 type: "pie",
                 z: 2,
-                radius: ["40%", "55%"],
-                center: ["30%", "50%"],
+                radius: ["70%", "66%"],
+                // center: ["30%", "50%"],
                 label: {
                     show: false,
                 },
@@ -269,11 +304,51 @@
   #pie-chart {
     box-sizing: border-box;
     color: white;
-  
+    .item-box{
+      position: absolute;
+      p{margin: 0;}
+      .item-name{
+        width: 200px;
+        font-size:30px;
+          color: #ffffff;
+          font-weight: bold;
+      }
+      .item-value-box{
+        display: flex;
+        align-items: center;
+      }
+      .item-value{
+        font-size:45px;
+        padding: 0 10px;
+        color: #ffffff;
+        font-weight: bold;
+      }
+    }
     .pie-chart-container {
-      width: 100%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
+      width: 50%;
       height: 100%
     }
+    /* 向右的三角形 */
+    .triangle-right {
+      width: 0;
+      height: 0;
+      border-top: 15px solid transparent;
+      border-bottom: 15px solid transparent;
+      border-left: 20px solid #ff4141; /* 通过调整颜色和尺寸改变外观 */
+    }
+
+    /* 向左的三角形 */
+    .triangle-left {
+      width: 0;
+      height: 0;
+      border-top: 15px solid transparent;
+      border-bottom: 15px solid transparent;
+      border-right: 20px solid #41a2ff; /* 通过调整颜色和尺寸改变外观 */
+    }
   }
   </style>
   
\ No newline at end of file
diff --git a/src/img/icons/12.png b/src/img/icons/12.png
new file mode 100644
index 0000000..7765f74
Binary files /dev/null and b/src/img/icons/12.png differ
diff --git a/src/img/icons/13.png b/src/img/icons/13.png
new file mode 100644
index 0000000..0f209e8
Binary files /dev/null and b/src/img/icons/13.png differ
diff --git a/src/img/icons/14.png b/src/img/icons/14.png
new file mode 100644
index 0000000..3cabcaf
Binary files /dev/null and b/src/img/icons/14.png differ
diff --git a/src/img/icons/15.png b/src/img/icons/15.png
new file mode 100644
index 0000000..ea41b7d
Binary files /dev/null and b/src/img/icons/15.png differ