3.0 修改

src/components/baozuo-demo2/CenterCmp.vue

@@ -7,7 +7,7 @@
         <dv-border-box-1>
           <div class="ccmc-title">
             <span class="title-decoration"></span>
-            本月工单概况
+            本月产品合格率比对
           </div>
           <div id="left-rankchart">
             <div class="rank-item" v-for="(item, index) in rankData" :key="index">
@@ -25,7 +25,7 @@
       </div>
       
       <div class="ccmc-middle">
-        <div class="middle-top" style="height:calc(100% - 500px)">
+        <div class="middle-top" style="height:calc(100% - 450px)">
           <div class="middle-top-container">
             <!-- 当日检验量 -->
             <div class="inspection-box">
@@ -37,18 +37,21 @@
             <div class="pass-rate-box">
               <div class="gauge-chart" style="height:200px" :id="'gauge-chart-1'"></div>
               <div class="pass-rate-title">机芯直通率</div>
+              <div class="pass-rate-value">机芯检验量：<span style="color:#08e5ff;">250</span></div>
             </div>
             
             <!-- 盖板直通率 -->
             <div class="pass-rate-box">
               <div class="gauge-chart" style="height:200px" :id="'gauge-chart-2'"></div>
               <div class="pass-rate-title">盖板直通率</div>
+              <div class="pass-rate-value">盖板检验量：<span style="color:#08e5ff;">580</span></div>
             </div>
             
             <!-- 整机直通率 -->
             <div class="pass-rate-box">
               <div class="gauge-chart" style="height:200px" :id="'gauge-chart-3'"></div>
               <div class="pass-rate-title">整机直通率</div>
+              <div class="pass-rate-value">整机检测量：<span style="color:#08e5ff;">420</span></div>
             </div>
           </div>
         </div>
@@ -59,7 +62,7 @@
         <dv-border-box-1>
           <div class="ccmc-title">
             <span class="title-decoration"></span>
-            当月工序不良比
+            本月来料合格率
           </div>
             <div id="right-echarts-new"></div>
         </dv-border-box-1>
@@ -188,25 +191,24 @@ export default {
         data: ['机芯产量', '盖板产量']
       },
       rankData: [
-      { name: '产品A', value: 98 },
+      { name: 'U1A', value: 99 },
-      { name: '产品B', value: 95 },
+      { name: 'U2A', value: 96 },
-      { name: '产品C', value: 93 },
+      { name: 'U2B', value: 90 },
-      { name: '产品D', value: 90 },
+      { name: 'U2C', value: 85 },
-      { name: '产品E', value: 88 },
+      { name: 'U1B', value: 95 },
-      { name: '产品F', value: 85 },
+      { name: 'U1C', value: 93 },
-      { name: '产品G', value: 82 },
+      { name: 'W1A', value: 82 },
-      { name: '产品H', value: 80 },
+      { name: 'W2A', value: 80 },
-      { name: '产品I', value: 78 },
+      { name: 'W3A', value: 98 },
-      { name: '产品J', value: 75 }
     ],
     rightChartData: [
-            { name: '工序1', value: Math.floor(Math.random() * 1000) },
+            { name: '注塑件', value: Math.floor(Math.random() * 100) },
-            { name: '工序2', value: Math.floor(Math.random() * 1000) },
+            { name: '五金件', value: Math.floor(Math.random() * 100) },
-            { name: '工序3', value: Math.floor(Math.random() * 1000) },
+            { name: '橡硅胶件', value: Math.floor(Math.random() * 100) },
-            { name: '工序4', value: Math.floor(Math.random() * 1000) },
+            { name: '包材件', value: Math.floor(Math.random() * 100) },
-            { name: '工序5', value: Math.floor(Math.random() * 1000) },
+            { name: '电子件', value: Math.floor(Math.random() * 100) },
-            { name: '工序6', value: Math.floor(Math.random() * 1000) },
+            { name: '组件', value: Math.floor(Math.random() * 100) },
-            { name: '工序7', value: Math.floor(Math.random() * 1000) }
+            { name: '陶瓷', value: Math.floor(Math.random() * 100) }
           ],
 
       leftData: this.dataType == '3'?originalLeftData2:originalLeftData,
@@ -290,6 +292,7 @@ export default {
         }
       myChart.setOption(this.option);
     },
+    // 修改柱状图y轴配置
     initRightChart() {
     const chart = echarts.init(document.getElementById('right-echarts-new'));
     const option = {
@@ -316,10 +319,12 @@ export default {
       },
       yAxis: {
         type: 'value',
-        max: 1000,
+        max: 100,
         axisLabel: {
           color: '#fff',
-          fontSize: 16
+          fontSize: 23,
+          fontWight:'bold',
+          formatter: '{value}%'  // 添加百分比显示
         },
         axisLine: {
           lineStyle: {
@@ -347,7 +352,7 @@ export default {
           show: true,
           position: 'top',
           color: '#fff',
-          fontSize: 16
+          fontSize: 18
         }
       }]
     };
@@ -484,7 +489,7 @@ export default {
 .middle-top {
   padding-left: 20px;
   margin-top: -50px;
-  margin-bottom: 50px;
+  // margin-bottom: 30px;
   background-image: linear-gradient(
             to bottom,
             rgba(135, 178, 252, 0.04),  /* 蓝色透明度15% */
@@ -538,6 +543,12 @@ export default {
       color: #fff;
       margin-top: -70px;
     }
+    .pass-rate-value {
+      font-size: 20px;
+      font-weight: bold;
+      color: #fff;
+      // margin-top: -20px;
+    }
   }
 }
 .center-cmp {

src/components/baozuo-demo2/LeftChart1.vue

@@ -1,5 +1,8 @@
 <template>
   <div id="rose-chart" style="width: 100%;height:100%">
+    <div class="chart-title">
+      本月不良率推移图
+    </div>
     <div :id="pieId" class="pie-chart-container"></div>
   </div>
 </template>
@@ -45,7 +48,7 @@ export default {
       console.log(myChart)
       this.option = {
         title: {
-          text: '本月不良率推移图',
+          // text: '本月不良率推移图',
           textStyle: {
             fontSize: 25,
             fontWight:'bold',
@@ -310,9 +313,25 @@ export default {
 #rose-chart {
   box-sizing: border-box;
   color: white;
+  .chart-title {
+    font-size: 25px;
+    color: white;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    // margin-bottom: 15px;
     
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 10px;
+      height: 20px;
+      background-color: #08e5ff; // 浅蓝色
+      margin-right: 10px;
+    }
+  }
   .pie-chart-container {
-    height: 100%
+    height:calc(100% - 30px);
   }
 }
 </style>

src/components/baozuo-demo2/LeftChart2.vue

@@ -22,13 +22,31 @@ export default {
     dataType: {
     }
   },
+  // 在data()中添加月份数据
   data() {
     return {
-      option: {}
+      option: {},
+      monthLabels: this.getRecentMonthLabels()
     }
   },
+  
+  // 在methods中添加获取最近月份标签的方法
   methods: {
-    createData() {
+    getRecentMonthLabels() {
+      const labels = [];
+      const date = new Date();
+      
+      for (let i = 5; i >= 0; i--) {
+        const d = new Date(date);
+        d.setMonth(date.getMonth() - i);
+        // 格式化为"年份后两位+月份" (如2504表示2025年4月)
+        const year = d.getFullYear().toString().slice(-2);
+        const month = (d.getMonth() + 1).toString().padStart(2, '0');
+        labels.push(`${year}${month}`);
+      }
+      return labels;
+    },
+  createData() {
       // 模拟数据（每个柱子的总高度，单位：%）
       const rawData = [85, 92, 78, 95, 88, 90]; // P1-P6的合格率数据
 
@@ -81,7 +99,7 @@ export default {
           },
           xAxis: {
           type: 'category',
-          data: ['P1', 'P2', 'P3', 'P4', 'P5', 'P6'],
+          data: this.monthLabels, // 使用动态生成的月份标签
           axisLabel: {
             fontSize: 23,
             color: '#fff',

src/components/baozuo-demo2/index.vue

@@ -3,7 +3,7 @@
     <dv-full-screen-container>
 
 
-      <top-header :Name="'恒通达智慧数据看板'" style="height:5%;" />
+      <top-header :Name="'褓座数字化智能工厂质量看板'" style="height:5%;" />
       <div class="main-container" style="height: 55%;">
         <div class="rmc-top-container" v-if="switchType == 2">
           <div class="rmctc-middle-container">

src/components/baozuo-demo2/pieChart.vue

@@ -124,7 +124,9 @@
                         formatter: function(params) {
                             return params.value;
                         },
-                        color: '#fff'
+                        color: '#fff',
+                        fontWeight: 'bold',
+                        fontSize: 20
                     }
                 }]
             }]