From 0439473f59bfde91e57b6acb0488e1bc8588244c Mon Sep 17 00:00:00 2001
From: ljx <864490211@qq.com>
Date: Wed, 11 Dec 2024 15:05:33 +0800
Subject: [PATCH] =?UTF-8?q?=20BI=E6=94=B9=E5=8A=A8=EF=BC=9A=201=EF=BC=8C?=
 =?UTF-8?q?=E6=9C=88=E7=94=9F=E4=BA=A7=E6=83=85=E5=86=B5=E3=80=8212?=
 =?UTF-8?q?=E4=B8=AA=E6=9C=88=E6=94=B9=E6=88=906=E4=B8=AA=E6=9C=88?=
 =?UTF-8?q?=E3=80=82=202=EF=BC=8C=E4=B8=8B=E9=9D=A2=E6=9C=BA=E8=8A=AF?=
 =?UTF-8?q?=E6=B4=BE=E5=B7=A5=E5=8D=95=E6=89=A7=E8=A1=8C=E8=BF=9B=E5=BA=A6?=
 =?UTF-8?q?=E5=92=8C=E7=9B=96=E6=9D=BF=E6=B4=BE=E5=B7=A5=E5=8D=95=E6=89=A7?=
 =?UTF-8?q?=E8=A1=8C=E8=BF=9B=E5=BA=A6=20=E6=94=B9=E6=88=90=20=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E7=9A=84=E5=BD=A2=E5=BC=8F=E3=80=82=E6=AF=94=E5=A6=82?=
 =?UTF-8?q?1=E5=88=86=E9=92=9F=E6=98=BE=E7=A4=BA=E6=9C=BA=E8=8A=AF?=
 =?UTF-8?q?=E6=B4=BE=E5=B7=A5=E5=8D=95=E6=89=A7=E8=A1=8C=E8=BF=9B=E5=BA=A6?=
 =?UTF-8?q?=EF=BC=8C1=E5=88=86=E9=92=9F=E6=98=BE=E7=A4=BA=E7=9B=96?=
 =?UTF-8?q?=E6=9D=BF=E6=B4=BE=E5=B7=A5=E5=8D=95=E6=89=A7=E8=A1=8C=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E3=80=82=203=EF=BC=8C=E6=9C=BA=E8=8A=AF=E6=B4=BE?=
 =?UTF-8?q?=E5=B7=A5=E5=8D=95=E6=89=A7=E8=A1=8C=E8=BF=9B=E5=BA=A6=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=88=97=EF=BC=9A=E7=BB=84=E8=A3=85=E3=80=81QC?=
 =?UTF-8?q?=E3=80=81=E8=80=81=E5=8C=96=EF=BC=88=E8=BF=993=E4=B8=AA?=
 =?UTF-8?q?=E5=88=97=E6=94=B9=E6=88=90=E7=94=A8=E8=BF=9B=E5=BA=A6=E5=9C=86?=
 =?UTF-8?q?=E5=9C=88=EF=BC=89=204=EF=BC=8C=E7=9B=96=E6=9D=BF=E6=B4=BE?=
 =?UTF-8?q?=E5=B7=A5=E5=8D=95=E5=A2=9E=E5=8A=A0=E5=88=97=EF=BC=9A=E7=BB=84?=
 =?UTF-8?q?=E8=A3=85=E3=80=81=E5=AE=89=E8=A7=84=E3=80=81=E7=BB=BC=E5=90=88?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E3=80=81=E8=80=81=E5=8C=96=EF=BC=88=E8=BF=99?=
 =?UTF-8?q?4=E4=B8=AA=E5=88=97=E6=94=B9=E6=88=90=E7=94=A8=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E5=9C=86=E5=9C=88=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/baozuo-demo/BottomCharts.vue   | 118 ++++++++++++++++--
 src/components/baozuo-demo/LeftChart1.vue     |  12 +-
 src/components/baozuo-demo/LeftChart2.vue     |  25 +++-
 .../baozuo-demo/img/icon_success.png          | Bin 0 -> 2791 bytes
 4 files changed, 138 insertions(+), 17 deletions(-)
 create mode 100644 src/components/baozuo-demo/img/icon_success.png

diff --git a/src/components/baozuo-demo/BottomCharts.vue b/src/components/baozuo-demo/BottomCharts.vue
index 3096eba..4be8a60 100644
--- a/src/components/baozuo-demo/BottomCharts.vue
+++ b/src/components/baozuo-demo/BottomCharts.vue
@@ -1,22 +1,21 @@
 <template>
   <div class="bottom-charts">
-    <div class="bc-chart-item">
+    <div class="bc-chart-item" v-if="isChange">
       <div class="bcci-header">机芯派工单执行进度</div>
       <dv-scroll-board :config="config1" style="height:90%;margin-left: 2%;width:96%" />
     </div>
-    <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" />
+    <!-- <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" /> -->
 
-    <div class="bc-chart-item">
+    <div class="bc-chart-item" v-if="!isChange">
       <div class="bcci-header">盖板派工单执行进度</div>
       <dv-scroll-board :config="config2" style="height:90%;margin-left: 2%;width:96%" />
-
     </div>
   </div>
 </template>
 
 <script>
 import LabelTag from './LabelTag'
-
+let timer = null;
 export default {
   name: 'BottomCharts',
   components: {
@@ -39,16 +38,71 @@ export default {
 
         // 计算完成百分比
         const completionRate = ((completedQuantity / orderQuantity) * 100).toFixed(2) + '%';
+        function createProgressCircle(percentage) {
+          let color, content;
+          if (percentage === 0) {
+            color = 'gray';
+            content = '0%';
+            return `
+              <div class="circle-progress" style="border-color: ${color}; ">
+                <div class="circle-content" style="color: ${color}; ">${content}</div>
+              </div>
+            `;
+          } else if (percentage === 100) {
+            color = '#1afa29';
+            content = '√';
+            return `
+            <div class="circle-progress" style="border-color: ${color}; ">
+              <div class="circle-img"></div>
+            </div>
+          `;
+          } else {
+            color = '#1e80ff';
+            content = `${percentage}%`;
+            return `
+            <div class="circle-progress" style="border-color: ${color}; ">
+              <div class="circle-content" style="color: ${color}; ">${content}</div>
+            </div>
+          `;
+          }
 
+
+          
+        }
+
+        //随机三个百分比 从大到小
+        const completionRate1 = Math.floor(Math.random() * 100);
+        const completionRate2 = Math.floor(Math.random() * 100);
+        const completionRate3 = Math.floor(Math.random() * 100);
+        const newDataItem = [];
         // 创建新的数据项
-        const newDataItem = [
+        if(title === 'U1机芯'){
+          newDataItem = [
           `PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
           title,  // 固定值
           formattedDate,  // 日期
           orderQuantity,  // 订单量
           completionRate,  // 完成率
+          createProgressCircle(100),
+          createProgressCircle(completionRate2),
+          createProgressCircle(0),
           completedQuantity  // 完成数量
         ];
+        }else{
+           newDataItem = [
+          `PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
+          title,  // 固定值
+          formattedDate,  // 日期
+          orderQuantity,  // 订单量
+          completionRate,  // 完成率
+          createProgressCircle(100),
+          createProgressCircle(completionRate2),
+          createProgressCircle(completionRate2),
+          createProgressCircle(0),
+          completedQuantity  // 完成数量
+        ];
+        }
+        
 
         data.push(newDataItem);
 
@@ -60,16 +114,18 @@ export default {
 
 
     return {
+      isChange: true,
       config1: {
-        header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '剩下数量'],
+        header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度','组装','QC','老化','剩下数量'],
         data: generateRandomData(60, 'U1机芯'),
         index: true,
         columnWidth: [50],
-        align: ['center']
+        align: ['center'],
+        waitTime: 30000,
       },
 
       config2: {
-        header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '剩下数量'],
+        header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度','组装','安规','综合测试','老化','剩下数量'],
         data: generateRandomData(30, 'U1盖板'),
         index: true,
         columnWidth: [50],
@@ -78,6 +134,15 @@ export default {
 
 
     }
+  },
+  created() {
+    let that = this;
+    timer = setInterval(()=>{
+      that.isChange = !that.isChange
+    },60000)
+  },
+  beforeDestroy() {
+    clearInterval(timer)
   }
 }
 </script>
@@ -90,7 +155,7 @@ export default {
   position: relative;
 
   .bc-chart-item {
-    width: 50%;
+    width: 100%;
     height: 100%;
     padding-top: 20px;
     box-sizing: border-box;
@@ -122,4 +187,37 @@ export default {
     left: 0%;
   }
 }
+.circle-progress {
+  top: 50%;
+  transform: translateY(-50%);
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    position: relative;
+    // background: conic-gradient(from 90deg at 50% 50%, transparent 0, rgba(18, 3, 117, 0.107) 0);
+    transition: all 0.5s ease;
+    border: 6px solid;
+  }
+.circle-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 0.16rem;
+  color: #333;
+}
+.circle-img{
+  width: 80%;
+  height: 80%;
+  background-image: url('./img/icon_success.png');
+  background-repeat: no-repeat;
+  background-size:contain;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.ceil{
+  font-size: 0.2rem;
+}
 </style>
diff --git a/src/components/baozuo-demo/LeftChart1.vue b/src/components/baozuo-demo/LeftChart1.vue
index fc7d026..ea202e1 100644
--- a/src/components/baozuo-demo/LeftChart1.vue
+++ b/src/components/baozuo-demo/LeftChart1.vue
@@ -51,10 +51,20 @@ export default {
         xAxis: {
           type: 'category',
           boundaryGap: false,
+          axisLine:{
+              lineStyle:{
+                color:'#fff'
+              }
+            },
           data: ['12-06', '12-07', '12-08', '12-09', '12-10', '12-11', '12-12']
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          axisLine:{
+              lineStyle:{
+                color:'#fff'
+              }
+            },
         },
         series: [
           {
diff --git a/src/components/baozuo-demo/LeftChart2.vue b/src/components/baozuo-demo/LeftChart2.vue
index 73df539..6ab53da 100644
--- a/src/components/baozuo-demo/LeftChart2.vue
+++ b/src/components/baozuo-demo/LeftChart2.vue
@@ -30,6 +30,9 @@ export default {
         title: {
           text: '月生产情况',
           subtext: '完成率',
+          subtextStyle:{
+            color:'#fff'
+          },
           textStyle:{
             color:'#fff'
           }
@@ -46,16 +49,26 @@ export default {
         toolbox: { 
         },
         calculable: true,
-        xAxis: [
-          {
+        xAxis:[
+        {
             type: 'category',
+            axisLine:{
+              lineStyle:{
+                color:'#fff'
+              }
+            },
             // prettier-ignore
-            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
-          }
+            data: ['6月', '7月', '8月', '9月', '10月', '11月'],
+          },
         ],
         yAxis: [
           {
-            type: 'value'
+            type: 'value',
+            axisLine:{
+              lineStyle:{
+                color:'#fff'
+              }
+            },
           }
         ],
         series: [
@@ -63,7 +76,7 @@ export default {
             name: '机芯1线',
             type: 'bar',
             data: [
-              80, 85, 98, 95, 87, 75, 65, 68, 69, 40, 82, 83
+            75, 65, 68, 69, 40, 82
             ],
             markPoint: {
               data: [
diff --git a/src/components/baozuo-demo/img/icon_success.png b/src/components/baozuo-demo/img/icon_success.png
new file mode 100644
index 0000000000000000000000000000000000000000..367a381f04cc4267980b19564a10731dcce13769
GIT binary patch
literal 2791
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

literal 0
HcmV?d00001