褓座最新

src/components/baozuo-demo/BottomCharts.vue

@@ -51,6 +51,7 @@ export default {
 
         // 计算完成百分比
         const completionRate = ((completedQuantity / orderQuantity) * 100).toFixed(2) + '%';
+        // eslint-disable-next-line no-inner-declarations
         function createProgressCircle(percentage) {
           let color, content;
           if (percentage === 0) {
@@ -89,6 +90,7 @@ export default {
         const completionRate3 = Math.floor(Math.random() * 100);
         const newDataItem = [];
         if(_this.dataType == '整机') {
+          // eslint-disable-next-line no-const-assign
           newDataItem = [
             `PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
             title,  // 固定值
@@ -103,9 +105,11 @@ export default {
             createProgressCircle(completionRate2),
             completedQuantity  // 完成数量
           ];
+        // eslint-disable-next-line brace-style
         }
         // 创建新的数据项
         else if (title === 'U1机芯') {
+          // eslint-disable-next-line no-const-assign
           newDataItem = [
             `PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
             title,  // 固定值
@@ -118,6 +122,7 @@ export default {
             completedQuantity  // 完成数量
           ];
         } else {
+          // eslint-disable-next-line no-const-assign
           newDataItem = [
             `PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
             title,  // 固定值
@@ -244,7 +249,7 @@ export default {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 0.16rem;
+  font-size: 0.2rem;
   color: #333;
 }
 

src/components/baozuo-demo/CenterCmp.vue

@@ -5,7 +5,7 @@
     </div>
 
     <div class="cc-details">
-      <div>本月总产量</div>
+      <div style="font-weight: bold;font-size: 40px;">本月总产量</div>
       <div class="card">1</div>
       <div class="card">1</div>
       <div class="card">3</div>
@@ -57,7 +57,7 @@
         <div class="right-container-new">
           <!-- 第一行 -->
           <div class="first-row">
-            <img src="../../img/icons/15.png" class="fc-icon">
+            <img src="../../img/icons/16.png" class="fc-icon">
             <!-- <div class="first-content">
               <p class="fc-name">{{ rightData[0].name }}</p>
               <p class="fc-value">{{ rightData[0].value }}</p>
@@ -110,8 +110,8 @@ export default {
     const originalRightData = [
       { 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' }
+      { icon: require(`@/img/icons/12.png`), name: '机芯备料进度', value: '98%' },
+      { icon: require(`@/img/icons/12.png`), name: '盖板备料进度', value: '85%' }
     ];
 
     // 将数值加倍（支持多次加倍）
@@ -153,6 +153,14 @@ export default {
             name: '机芯产量',
             value: 42
           },
+          {
+            name: '盖板产量',
+            value: 58
+          },
+          {
+            name: '盖板产量',
+            value: 70
+          },
           {
             name: '盖板产量',
             value: 58
@@ -244,7 +252,9 @@ export default {
       height: 90%;
 
       .active-ring-name {
-        font-size: 20px !important;
+        font-size: 25px !important;
+        font-weight: bold;
+        height:80px;
       }
     }
 
@@ -380,6 +390,7 @@ export default {
           }
 
         .fc-icon {
+          // padding: 20px;
           width: 300px;
           height: 300px;
           object-fit: cover;

src/components/baozuo-demo/pieChart.vue

@@ -1,10 +1,11 @@
 <template>
     <div id="pie-chart" style="height: 100%;width: 100%;position: relative;">
-      <div id="pieId-new" class="pie-chart-container"></div>
+      <!-- <div id="pieId-new" class="pie-chart-container"></div> -->
+       <dv-active-ring-chart class="pie-chart-container" :config="config" />
       <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> 
+          <p class="item-value" style="color: #3de7c9;">{{ testchartData[0].value }}</p>
+          <div class="triangle-left" style="border-right:20px solid #3de7c9;"></div> 
         </div>
         <p class="item-name">{{ testchartData[0].name }}</p>
       </div>
@@ -49,6 +50,30 @@
     },
     data() {
       return {
+        config: {
+        data: [
+        {
+            value: 520,
+            name: "机芯产量",
+            },
+            {
+            value: 280,
+            name: "盖板产量",
+            },
+            {
+            value: 100,
+            name: "整机产量",
+            },
+            {
+            value: 100,
+            name: "组件产量",
+            },
+        ],
+        color: ['#3de7c9','#88a8f4','#ffdc9d','#eb7e41'],
+        lineWidth: 40,
+        radius: '55%',
+        activeRadius: '60%'
+      },
         testchartData:[
         {
             value: 520,
@@ -79,6 +104,7 @@
     },
     methods: {
       createData() {
+       
         const chartData = [
             {
             value: 520,
@@ -138,7 +164,7 @@
         //     color: "#E5F2A7",
         // },
         // ]),
-        '#f8ffff','#88a8f4','#ffdc9d','#eb7e41'
+        '#3de7c9','#88a8f4','#ffdc9d','#eb7e41'
         ];
         const sum = chartData.reduce((per, cur) => per + cur.value, 0);
         const gap = (1 * sum) / 100;
@@ -181,6 +207,7 @@
         pieData2.push(gapData);
         }
         var myChart = echarts.init(document.getElementById('pieId-new'));
+        const chartDom = document.getElementById('pieId-new');
         this.option = {
             title: [
                 {
@@ -276,6 +303,21 @@
                     show: false,
                 },
                 data: pieData1,
+                emphasis: { // 高亮时的样式（放大）
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        radius: ['35%', '65%'], // 放大后的半径
+                        transition: ['radius'], // 开启动画过渡
+                    }
+                },
+                blur: { // 非高亮时的样式（缩小）
+                    itemStyle: {
+                        radius: ['25%', '55%'] // 缩小后的半径
+                    }
+                },
+                animationDuration: 1000, // 动画时长
+                animationEasing: 'cubicInOut' // 缓动效果
                 },
                 {
                 type: "pie",
@@ -294,6 +336,23 @@
             ],
             };
         myChart.setOption(this.option);
+        // 轮播逻辑
+        let currentIndex = -1;
+        const dataLen = pieData1.length;
+        const timer = setInterval(() => {
+            // 取消之前的高亮
+            myChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: currentIndex });
+            // 计算下一个索引
+            currentIndex = (currentIndex + 1) % dataLen;
+            // 高亮当前项
+            myChart.dispatchAction({
+                type: 'highlight',
+                seriesIndex: 0,
+                dataIndex: currentIndex
+            });
+        }, 2000); // 2秒切换一次
+
+       
       },
     },