页面调整

src/components/baozuo-demo/CenterCmp copy.vue

@@ -149,7 +149,7 @@ export default {
       height: 90%;
 
       .active-ring-name {
-        font-size: 20px !important;
+        font-size: 30px !important;
       }
     }
 

src/components/baozuo-demo/CenterCmp.vue

@@ -15,28 +15,9 @@
     </div>
 
     <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>
-        </div>
-       
-      </div>
-
-      <!-- <dv-active-ring-chart class="ccmc-middle" :config="config" /> -->
-       <div class="ccmc-middle">
-        <PieChart :dataType="dataType"></PieChart>
-       </div>
-
       <div class="ccmc-right">
         <div class="ccmc-title">
-          {{dataType=='3'?'未完成订单数量':'保养及备料信息'}}
+          本月工单概况
         </div>
         <!-- <div class="ccmc-items">
           <div class="station-info" v-for="(item, index) in rightData" :key="index">
@@ -69,7 +50,7 @@
           <div class="second-row">
             <div 
               class="item-card" 
-              v-for="(item, index) in rightData" 
+              v-for="(item, index) in leftData" 
               :key="index"
             >
               <img :src="item.icon" class="sc-icon">
@@ -80,6 +61,29 @@
         </div>
       </div>
       
+
+      <!-- <dv-active-ring-chart class="ccmc-middle" :config="config" /> -->
+       <div class="ccmc-middle">
+        <PieChart :dataType="dataType"></PieChart>
+       </div>
+       <div class="ccmc-left">
+        <div class="ccmc-title">
+          {{dataType=='3'?'未完成订单数量':'保养及备料信息'}}
+        </div>
+        <div class="new-bar-chart" v-show="dataType !='3'">
+          <div id="echarts-new" style="height: 400px;width: 800px;"></div>
+        </div>
+        <div class="ccmc-items" v-show="dataType=='3'">
+          <div class="station-info" v-for="(item, index) in rightData" :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>
+        </div>
+       
+      </div>
+    
+
       <!-- <LabelTag :config="labelConfig" /> -->
     </div>
   </div>
@@ -88,6 +92,7 @@
 <script>
 import LabelTag from './LabelTag'
 import PieChart from './pieChart.vue'
+import * as echarts from 'echarts';
 export default {
   name: 'CenterCmp',
   components: {
@@ -103,10 +108,10 @@ export default {
     // 定义原始数据
     const originalLeftData = [
       
-      { icon: require(`@/img/icons/1.png`), name: '本月订单数', value: '1120' },
+      { icon: require(`@/img/icons/12.png`), name: '本月订单数', value: '1120' },
-      { icon: require(`@/img/icons/2.png`), name: '本月派工数', value: '600' },
+      { icon: require(`@/img/icons/12.png`), name: '本月派工数', value: '600' },
-      { icon: require(`@/img/icons/3.png`), name: '本月派工未完成数', value: '60%' },
+      { icon: require(`@/img/icons/12.png`), name: '本月派工未完成数', value: '800' },
-      { icon: require(`@/img/icons/3.png`), name: '本月派工完成率', value: '100%' }
+      { icon: require(`@/img/icons/12.png`), name: '本月派工完成率', value: '100%' }
     ];
     const originalLeftData2 = [
       { icon: require(`@/img/icons/1.png`), name: '完成工单数', value: '1120' },
@@ -115,10 +120,11 @@ export default {
     ];
 
     const originalRightData = [
-      { icon: require(`@/img/icons/12.png`), name: '保养台数', value: '20' },
+      { 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: 100 },
-      { icon: require(`@/img/icons/12.png`), name: '机芯备料进度', value: '98%' },
+      { icon: require(`@/img/icons/12.png`), name: '整机备料率', value: 90 },
-      { icon: require(`@/img/icons/12.png`), name: '盖板备料进度', value: '85%' }
+      { icon: require(`@/img/icons/12.png`), name: '盖板备料率', value: 85 },
+      { icon: require(`@/img/icons/12.png`), name: '机芯备料率', value: 90 },
     ];
     const originalRightData2 = [
       { icon: require(`@/img/icons/12.png`), name: '水件', value: '12000' },
@@ -153,6 +159,15 @@ export default {
         radius: '55%',
         activeRadius: '60%'
       },
+      config1:{
+        showValue:true,
+        data:[  
+          { 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: 90 },
+          { icon: require(`@/img/icons/12.png`), name: '盖板备料进度', value: 85 }
+        ]
+      },
 
       labelConfig: {
         
@@ -162,7 +177,127 @@ export default {
       leftData: this.dataType == '3'?originalLeftData2:originalLeftData,
       rightData: this.dataType == '3'?originalRightData2:originalRightData
     }
-  }
+  },
+  mounted(){
+    this.createData();
+  },
+  methods: {
+    createData() {
+      // 原始数据（每个柱子的总高度，单位：%）
+      const rawData = this.rightData.map(item=>{return item.value});
+      const categories = this.rightData.map(item=>{return item.name});
+
+      // 将数据按 10% 分段，生成堆叠数据
+      const generateStackData = (value) => {
+        const segments = [];
+        let remaining = value;
+        for (let i = 0; i < 10; i++) { // 最多分成 10 段（100%）
+          const segmentValue = remaining >= 10 ? 10 : remaining;
+          if (segmentValue <= 0) break;
+          segments.push(segmentValue);
+          remaining -= segmentValue;
+        }
+        return segments;
+      };
+
+      // 生成堆叠数据系列
+      const series = [];
+      for (let i = 0; i < 10; i++) { // 最多 10 个堆叠层
+        series.push({
+          type: 'bar',
+          stack: 'total', // 堆叠组名
+          data: rawData.map(value => {
+            const segments = generateStackData(value);
+            return i < segments.length ? segments[i] : 0; // 超出分段返回 0
+          }),
+          itemStyle: {
+            color: `rgba(135, 206, 235, ${i * 0.1+0.2})`, // 从下往上透明度变化,
+            borderColor: 'transparent',
+            borderWidth: 3,
+          },
+          barGap: '0%', // 柱子间无间隔
+          barCategoryGap: '20%' // 类目间留间隙
+        });
+      }
+      var myChart = echarts.init(document.getElementById('echarts-new'));
+      // this.option = {
+      //   xAxis: {
+      //     type: 'category',
+      //     data: this.rightData.map(item=>{return item.name}),
+      //     axisLabel: {
+      //       fontSize: 18, // 设置 Y 轴字体大小
+      //       color: '#fff', // 可选：设置字体颜色
+      //     },
+      //   },
+      //   yAxis: {
+      //     type: 'value',
+      //     splitLine: {
+      //       show: false, // 显示 y 轴辅助线
+      //    },
+      //    axisLabel: {
+      //       fontSize: 25, // 设置 Y 轴字体大小
+      //       color: '#fff', // 可选：设置字体颜色
+      //       // 只显示偶数的 y 轴标签
+      //     },
+          
+      //   },
+      //   series: [
+      //     {
+      //       data: this.rightData.map(item=>{return item.value}),
+      //       type: 'bar',
+      //       showBackground: true,
+      //       backgroundStyle: {
+      //         color: 'rgba(180, 180, 180, 0.2)'
+      //       },
+      //       barWidth: '60%',
+      //       itemStyle: {
+      //           borderRadius: [5, 5, 0, 0], // 顶部圆角，模拟切除效果
+      //           color: {
+      //           type: 'linear', // 线性渐变
+      //           x: 0, // 从左到右
+      //           y: 0,
+      //           x2: 0, // 从下到上
+      //           y2: 1,
+      //           colorStops: [
+      //               { offset: 0, color: '#3399FF' }, // 浅蓝色，起始颜色
+      //               { offset: 0.5, color: '#08e5ff' }, // 浅蓝色，起始颜色
+                   
+      //               { offset: 1, color: '#F4f4f4' }  // 白色，结束颜色
+      //           ]
+      //       }
+      //       }
+      //     }
+      //   ]
+      // };
+      
+        this.option = {
+          xAxis: {
+          type: 'category',
+          data: categories,
+          axisLabel: {
+            fontSize: 19, // 设置 Y 轴字体大小
+            color: '#fff', // 可选：设置字体颜色
+            fontWight:'bold'
+          },
+        },
+        yAxis: {
+          type: 'value',
+          max: 100,
+          // axisLine: { show: false },
+          splitLine: {
+            show: false, // 显示 y 轴辅助线
+          },
+          axisLabel: {
+            fontSize: 25, // 设置 Y 轴字体大小
+            color: '#fff', // 可选：设置字体颜色
+            // 只显示偶数的 y 轴标签
+          },
+        },
+        series: series
+        }
+      myChart.setOption(this.option);
+    },
+  },
 }
 </script>
 
@@ -234,9 +369,16 @@ export default {
       height: 90%;
 
       .active-ring-name {
-        font-size: 25px !important;
+        width: 150px;
+        font-size: 30px !important;
+        font-weight: bold;
+        height:100px;
+      }
+      .dv-digital-flop {
+        font-size: 100px;
+        // width: 100px;
+        // height: 30px;
         font-weight: bold;
-        height:80px;
       }
     }
 
@@ -389,7 +531,7 @@ export default {
           font-weight: bold;
         }
         .sc-name{
-          font-size:25px;
+          font-size:20px;
           color: #ffffff;
           font-weight: bold;
         }
@@ -406,7 +548,11 @@ export default {
           border-radius: 6px;
         }
     }
-
+  .new-bar-chart{
+    position: absolute;
+    top: 110px;
+    left: 30px;
+  }
     
 }
 </style>

src/components/baozuo-demo/LeftChart1.vue

@@ -52,7 +52,7 @@ export default {
         title: {
           text: '近一周产量趋势',
           textStyle: {
-            fontSize:25,
+            fontSize:30,
             fontWight:'bold',
             color: '#fff'
           }
@@ -61,10 +61,14 @@ export default {
           trigger: 'axis'
         },
         legend: {
-          data: this.dataType == '整机' ? ['整机线'] : ['机芯1线', '机芯2线', '盖板线'],
+          icon: 'rect',
+          itemWidth: 20, // 色块宽度
+          itemHeight: 20, // 色块高度
+          itemGap: 40, // 图例之间的间距
+          data: this.dataType == '整机' ? ['整机线'] : ['整机', '机芯', '盖板'],
           textStyle: {
             color: '#fff',
-            fontSize:25,
+            fontSize:30,
             fontWight:'bold'
           }
         },
@@ -76,15 +80,21 @@ export default {
         },
         xAxis: {
           type: 'category',
-          boundaryGap: false,
+          boundaryGap: true,
           axisLine: {
             lineStyle: {
               color: '#fff'
             }
           },
+          
           axisLabel: {
-            fontSize: 20, // 设置 Y 轴字体大小
+            fontSize: 35, // 设置 Y 轴字体大小
-            color: '#fff' // 可选：设置字体颜色
+            color: '#fff', // 可选：设置字体颜色
+            onZero: false ,// 确保 y 轴不与第一个数据点对齐
+            // 只显示奇数索引的 x 轴标签
+            // formatter: function (value, index) {
+            //     return index % 2 === 1 ? value : ''; // 奇数索引显示，偶数索引隐藏
+            // }
           },
          
           data:  getRecentWeekDates()
@@ -96,9 +106,23 @@ export default {
               color: '#fff'
             }
           },
+          splitLine: {
+            show: true, // 显示 y 轴辅助线
+            lineStyle: {
+                type: 'dashed', // 设置为虚线
+                color: '#999', // 虚线颜色
+                width: 2, // 虚线宽度
+                height:1,
+                dashArray: [15, 5]
+            }
+         },
           axisLabel: {
-            fontSize: 20, // 设置 Y 轴字体大小
+            fontSize: 35, // 设置 Y 轴字体大小
-            color: '#fff' // 可选：设置字体颜色
+            color: '#fff', // 可选：设置字体颜色
+            // 只显示偶数的 y 轴标签
+            formatter: function (value) {
+                return value % 200 === 0 ? value : ''; // 偶数显示，奇数隐藏
+            }
           },
         },
         series:
@@ -108,29 +132,48 @@ export default {
                 name: '整机线',
                 type: 'line',
                 stack: 'Total',
-                data: [133, 162, 191, 134, 130, 230, 310]
+                data: [133, 162, 191, 134, 130, 230, 310],
+                lineStyle: {
+                    width: 4, // 数据线加粗
+                }
               }
             ] :
             [
 
               {
-                name: '机芯1线',
+                name: '整机',
                 type: 'line',
                 stack: 'Total',
+                smooth: true,
                 data: [120, 132, 101, 134, 90, 230, 210],
+                lineStyle: {
+                    width: 4, // 数据线加粗
+                },
+                symbolSize: 12, // 数据点大小
               },
               {
-                name: '机芯2线',
+                name: '机芯',
                 type: 'line',
                 stack: 'Total',
-                data: [150, 142, 111, 114, 120, 120, 110]
+                smooth: true,
+                data: [150, 142, 111, 114, 120, 120, 110],
+                lineStyle: {
+                    width: 4, // 数据线加粗
+                },
+                symbolSize: 12, // 数据点大小
               },
               {
-                name: '盖板线',
+                name: '盖板',
                 type: 'line',
                 stack: 'Total',
-                data: [130, 232, 201, 154, 190, 330, 410]
+                smooth: true,
-              }
+                data: [130, 232, 201, 154, 190, 330, 410],
+                lineStyle: {
+                    width: 4, // 数据线加粗
+                },
+                symbolSize: 12, // 数据点大小
+              },
+              
             ]
       };
       myChart.setOption(this.option);

src/components/baozuo-demo/LeftChart2.vue

@@ -22,6 +22,7 @@ function getRecentSixMonths() {
 
     return months;
 }
+import { color } from 'chart.js/helpers';
 import * as echarts from 'echarts';
 export default {
   name: 'RoseChart',
@@ -47,15 +48,15 @@ export default {
       console.log(myChart)
       this.option = {
         title: {
-          text: '月生产情况',
+          text: '近半年产量情况',
-          subtext: '完成率',
+          // subtext: '完成率',
-          subtextStyle:{
+          // subtextStyle:{
-            fontSize:20,
+          //   fontSize:20,
-            fontWight:'bold',
+          //   fontWight:'bold',
-            color:'#fff'
+          //   color:'#fff'
-          },
+          // },
           textStyle:{
-            fontSize:25,
+            fontSize:30,
             fontWight:'bold',
             color:'#fff'
           }
@@ -64,12 +65,24 @@ export default {
           trigger: 'axis',
         },
         legend: {
-          data: this.dataType == '整机' ?['机芯1线', '机芯2线', '盖板线'] : ['整机线'],
+          icon: 'rect',
-          textStyle:{
+          itemWidth: 20, // 色块宽度
-            fontSize:25,
+          itemHeight: 20, // 色块高度
-            color:'#fff'
+          itemGap: 40, // 图例之间的间距
+          data: this.dataType == '整机' ?['整机线']:['整机', '机芯', '盖板'],
+          
+          textStyle: {
+            color: '#fff',
+            fontSize:30,
+            fontWight:'bold'
           }
         },
+        grid: {
+          left: '3%',
+          right: '7%',
+          bottom: '3%',
+          containLabel: true
+        },
         toolbox: { 
         },
         calculable: true,
@@ -82,7 +95,7 @@ export default {
               }
             },
             axisLabel: {
-            fontSize: 20, // 设置 Y 轴字体大小
+            fontSize: 35, // 设置 Y 轴字体大小
             color: '#fff' // 可选：设置字体颜色
           },
             // prettier-ignore
@@ -98,9 +111,19 @@ export default {
               }
             },
             axisLabel: {
-            fontSize: 20, // 设置 Y 轴字体大小
+              fontSize: 35, // 设置 Y 轴字体大小
-            color: '#fff' // 可选：设置字体颜色
+              color: '#fff' // 可选：设置字体颜色
-          },
+            },
+            splitLine: {
+            show: false, // 显示 y 轴辅助线
+            lineStyle: {
+                type: 'dashed', // 设置为虚线
+                color: '#999', // 虚线颜色
+                width: 2, // 虚线宽度
+                height:1,
+                dashArray: [15, 5]
+            }
+         },
           }
         ],
         series:
@@ -119,17 +142,25 @@ export default {
               ]
             },
             markLine: {
-              data: [{ type: 'average', name: 'Avg' }]
+              data: [{ type: 'average', name: 'Avg' }],
+              lineStyle:{
+                width: 2, // 虚线宽度
+              },
+              label:{
+                fontSize:'20',
+                // color:'red'
+              }
             }
           }
         ]:
         [
           {
-            name: '机芯1线',
+            name: '整机',
             type: 'bar',
             data: [
             75, 65, 68, 69, 40, 82
             ],
+            barWidth: 30, // 设置柱状图宽度为 20px
             markPoint: {
               data: [
                 { type: 'max', name: 'Max' },
@@ -137,15 +168,23 @@ export default {
               ]
             },
             markLine: {
-              data: [{ type: 'average', name: 'Avg' }]
+              data: [{ type: 'average', name: 'Avg' }],
+              lineStyle:{
+                width: 2, // 虚线宽度
+              },
+              label:{
+                fontSize:'20',
+                color:'#ffffff'
+              }
             }
           },
           {
-            name: '机芯2线',
+            name: '机芯',
             type: 'bar',
             data: [
               70, 75, 88, 85, 97, 85, 75, 78, 59, 80, 82, 63
             ],
+            barWidth: 30, // 设置柱状图宽度为 20px
             markPoint: {
               data: [
                 { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
@@ -153,15 +192,23 @@ export default {
               ]
             },
             markLine: {
-              data: [{ type: 'average', name: 'Avg' }]
+              data: [{ type: 'average', name: 'Avg' }],
+              lineStyle:{
+                width: 2, // 虚线宽度
+              },
+              label:{
+                fontSize:'20',
+                color:'#ffffff'
+              }
             }
           },
           {
-            name: '盖板线',
+            name: '盖板',
             type: 'bar',
             data: [
               80, 85, 78, 75, 67, 45, 55, 68, 49, 50, 72, 93
             ],
+            barWidth: 30, // 设置柱状图宽度为 20px
             markPoint: {
               data: [
                 { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
@@ -169,7 +216,14 @@ export default {
               ]
             },
             markLine: {
-              data: [{ type: 'average', name: 'Avg' }]
+              data: [{ type: 'average', name: 'Avg' }],
+              lineStyle:{
+                width: 2, // 虚线宽度
+              },
+              label:{
+                fontSize:'20',
+                color:'#ffffff'
+              }
             }
           }
         ]

src/components/baozuo-demo/index.vue

@@ -72,9 +72,9 @@ export default {
       this.dataType = ''; // 如果不是 '1'，则设置为空
     }
 
-    setInterval(() => {
+    // setInterval(() => {
-      this.switchType = this.switchType == 1 ? 2 : 1
+    //   this.switchType = this.switchType == 1 ? 2 : 1
-    }, 15000); // 10000 毫秒 = 10 秒
+    // }, 15000); // 10000 毫秒 = 10 秒
   },
   data() {
     return {

src/components/baozuo-demo/pieChart.vue

@@ -73,8 +73,8 @@
         ],
         color: ['#3de7c9','#88a8f4','#ffdc9d','#eb7e41'],
         lineWidth: 40,
-        radius: '55%',
+        radius: '75%',
-        activeRadius: '60%'
+        activeRadius: '80%'
       },
         testchartData:[
         {
@@ -94,6 +94,10 @@
             name: "组件产量",
             },
         ],
+        digitalFlopStyle: {
+          fontSize: 45,
+          fill: '#fff'
+        },
         option: {}
       }
     },