From 92aa82e78f314d2d8a442240e93ae08499619f9a Mon Sep 17 00:00:00 2001
From: "LAPTOP-R6EHHS26\\86155" <2217640373@qq.com>
Date: Thu, 14 Mar 2024 17:06:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=88=90=E5=93=81=E7=9C=8B?=
 =?UTF-8?q?=E6=9D=BF=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/kanban/Packagingline/index.vue | 628 ++++++++++++++++++++---
 src/views/kanban/finishproduct/index.vue |   1 -
 2 files changed, 549 insertions(+), 80 deletions(-)

diff --git a/src/views/kanban/Packagingline/index.vue b/src/views/kanban/Packagingline/index.vue
index 18967b1..5f1dcec 100644
--- a/src/views/kanban/Packagingline/index.vue
+++ b/src/views/kanban/Packagingline/index.vue
@@ -82,7 +82,7 @@
                             <div class="yieldbox">
                                 <div class="yieldtitle">
                                     <div class="yieldname">
-                                        当日计划产量
+                                        产线目前产量
                                     </div>
                                 </div>
                                 <div class="yieldnumber">
@@ -114,6 +114,7 @@
                                 </div>
                             </div>
                         </div>
+                        <div id="echart6" style="margin: auto; width: 1170px; height:244.15px"></div>
                     </div>
                     <div class="itemleft-bottom">
                         <div class="item-table1">
@@ -216,46 +217,87 @@
                         <div class="titlebox" style="margin-bottom: 14px;">
                             <div class="titlename">产线信息</div>
                         </div>
-                        <div class="titlebox2" style="margin-bottom: 30px;">
-                            <img src="../../../assets/images/packagingline/bg-title3.png" alt="">
+                        <div class="titlebox2" style="margin-bottom: 22px;">
+                            <div class="icon"><img src="../../../assets/images/packagingline/bg-title3.png" alt="">
+                            </div>
                             <div class="titlename">当前工单信息</div>
                         </div>
-                        <table class="table-thead" border="0" cellpadding="0" cellspacing="0">
-                            <thead>
-                                <tr style="height: 44px;">
-                                    <td style="width: 8%;">序号</td>
-                                    <!-- <td style="width: 8%;">异常单号</td> -->
-                                    <td style="width: 8%;">物料名称</td>
-                                    <td style="width: 8%;">订单号</td>
-                                    <td style="width: 8%;">来料时间</td>
-                                    <td style="width: 8%;">质检确认时间</td>
-                                    <td style="width: 8%;">质检数量</td>
-                                    <td style="width: 8%;">检验人</td>
-                                    <td style="width: 8%;">质检不合格</td>
-                                </tr>
-                            </thead>
-                        </table>
                         <div class="table-tbody">
                             <!-- <vue-seamless-scroll :data="getlistcx" :class-option="classOption" class="wrapscroll"> -->
                             <table border="0" cellpadding="0" cellspacing="0">
                                 <tbody>
-                                    <tr :class="[index % 2 == 1 ? 'active1' : 'active2']" style="height:48px"
-                                        :key="index" v-for="(n, index) in orderdetail">
-                                        <td style="width: 8%;">{{ index + 1 }}</td>
+                                    <tr style="height:36px">
+                                        <td
+                                            style="width: 4%; background-color: #081831;border-right: 1px solid #6C8097">
+                                            当前产线</td>
                                         <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
-                                        <td style="width: 8%;">{{ n.materialName }}</td>
-                                        <td style="width: 8%;">{{ n.orderNo }}</td>
-                                        <td style="width: 8%;">{{ n.checkTime }}</td>
-                                        <td style="width: 8%;">{{ n.incomeTime }}</td>
-                                        <td style="width: 8%;">{{ n.quality }}</td>
-                                        <td style="width: 8%;">{{ n.checkManName }}</td>
-                                        <td style="width: 8%;">{{ n.checkResult }}</td>
+                                        <td style="width: 8%;">1#工单号:000800000131</td>
+                                    </tr>
+                                    <tr style="height:36px">
+                                        <td style="width: 4%;background-color: #081831;border-right: 1px solid #6C8097">
+                                            产品名称</td>
+                                        <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
+                                        <td style="width: 8%;">菊儿宝健蚊香3+1家庭特惠装(18装)工</td>
+                                    </tr>
+                                    <tr style="height:36px">
+                                        <td style="width: 4%;background-color: #081831;border-right: 1px solid #6C8097">
+                                            数量</td>
+                                        <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
+                                        <td style="width: 8%;">7000产品</td>
+                                    </tr>
+                                    <tr style="height:36px">
+                                        <td style="width: 4%;background-color: #081831;border-right: 1px solid #6C8097">
+                                            单位</td>
+                                        <!-- <td style="width: 8%;">{{ n.orderNo }}</td> -->
+                                        <td style="width: 8%;">KAR</td>
                                     </tr>
-
                                 </tbody>
                             </table>
                             <!-- </vue-seamless-scroll> -->
                         </div>
+                        <div class="titlebox2" style="margin-bottom: 22px;margin-top: 26px;">
+                            <div class="icon"><img src="../../../assets/images/packagingline/bg-title3.png" alt="">
+                            </div>
+                            <div class="titlename">实时数量</div>
+                        </div>
+                        <div class="Realtime">
+                            <div class="Realtime-box">
+                                <div class="box" :key="index" v-for="(x, index) in Realtimebox">
+                                    <div class="icon1">
+                                        <img src="../../../assets/images/packagingline/icon-title4.png" alt="">
+                                    </div>
+                                    <div class="item">
+                                        <div class="itemtitle">
+                                            发片数量
+                                        </div>
+                                        <div class="itemnumber">
+                                            888
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="Realtime-box" style="margin-top: 26px;">
+                                <div class="box" :key="index" v-for="(x, index) in Realtimebox2">
+                                    <div class="icon1">
+                                        <img src="../../../assets/images/packagingline/icon-title4.png" alt="">
+                                    </div>
+                                    <div class="item">
+                                        <div class="itemtitle">
+                                            发片数量
+                                        </div>
+                                        <div class="itemnumber">
+                                            888
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="titlebox2" style="margin-bottom: 22px;margin-top: 26px;">
+                            <div class="icon"><img src="../../../assets/images/packagingline/bg-title3.png" alt="">
+                            </div>
+                            <div class="titlename">小时效率分析</div>
+                        </div>
+                        <div id="echart5" style="margin: auto; width: 570px; height:304.15px"></div>
                     </div>
 
                 </div>
@@ -269,10 +311,12 @@
 <script>
 import {
     getBoardFactory,
-    getOverallInfo,
+    getProduceStaticInfo,
+    getProduceNoOkList,
     getCheckProjectsPie,
-    getSupplierBadTOP5,
-    getSupplierNoOkList,
+    getProMonthNoOk,
+    getLineDayNoOk,
+    getMonthOfYearContrast,
     getDictData,
 } from "@/api/kanban/quality";
 import {
@@ -297,16 +341,7 @@ export default {
             number2: 0,
             number3: 0,
             number4: 0,
-            nameList: [
-                "成型机一",
-                "成型机二",
-                "成型机三",
-                "成型机四",
-                "成型机五",
-                "成型机六",
-                "成型机五",
-                "成型机六",
-            ],
+            nameList: [],
             valueList: [1639, 1422, 1306, 1131, 1040, 732, 1040, 732],
             optionDatalist1: [],
             optionDatalist2: [],
@@ -315,39 +350,21 @@ export default {
             colorlist: ["#005aff", "#f8b551"],
             datetime: null,
             time1: null,
-            getlist: [
-                {
-
-                },
-                {
-
-                },
-                {
-
-                },
-                {
-
-                },
-                {
-
-                },
-            ],
+            getlist: [],
             repairlist: [],
             orderdetail: [],
             packaginglinerepairlist: [],
             packaginglinestabilizelist: [],
             packaginglineinfo: [],
-            ordermessage: [
-                {
-
-                }, {
-
-                }, {
-
-                }
-            ],
+            ordermessage: [],
             RefreshTime: null,
             dictDatatype: [],
+            Realtimebox: [
+                {}, {}, {}, {},
+            ],
+            Realtimebox2: [
+                {}, {}, {}, {},
+            ]
         };
     },
     created() { },
@@ -382,6 +399,7 @@ export default {
                     _this.getLineList = response.data;
                     _this.selectxt = _this.getLineList[0].parentName;
                     _this.getDictData()
+                    _this.initChart1()
                 }
             });
         },
@@ -497,6 +515,436 @@ export default {
             this.optionDatalist4 = [];
             _this.getdatalist(_this.selectxt)
         },
+        initChart1() {
+            const _this = this
+            var myChart5 = echarts.init(document.querySelector("#echart5"));
+            var fontColor = '#D0DEEE';
+            var option5 = {
+                // backgroundColor: '#424956',
+                title: {
+                    text: '请求数',
+                    textStyle: {
+                        fontWeight: 'normal',
+                        fontSize: 16,
+                        color: '#F1F1F3'
+                    },
+                    left: '6%'
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        lineStyle: {
+                            color: '#57617B'
+                        }
+                    }
+                },
+                legend: {
+                    icon: 'rect',
+                    itemWidth: 14,
+                    itemHeight: 5,
+                    itemGap: 13,
+                    data: ['移动', '电信', '联通'],
+                    right: '4%',
+                    textStyle: {
+                        fontSize: 12,
+                        color: '#292f39'
+                    }
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '0%',
+                    top: '5%',
+                    containLabel: true
+                },
+                xAxis: [{
+                    type: 'category',
+                    boundaryGap: false,
+                    axisLine: {
+                        lineStyle: {
+                            color: '#57617B'
+                        }
+                    },
+                    data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35']
+                }],
+                yAxis: [{
+                    type: 'value',
+                    name: '单位（%）',
+                    axisTick: {
+                        show: false
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: '#57617B'
+                        }
+                    },
+                    axisLabel: {
+                        margin: 10,
+                        textStyle: {
+                            fontSize: 14
+                        }
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: '#57617B'
+                        }
+                    }
+                }],
+                series: [{
+                    name: '移动',
+                    type: 'line',
+                    smooth: true,
+                    symbol: 'circle',
+                    symbolSize: 5,
+                    showSymbol: false,
+                    lineStyle: {
+                        normal: {
+                            width: 3
+                        }
+                    },
+                    areaStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                                offset: 0,
+                                color: 'rgba(16,97,204, 0.3)'
+                            }, {
+                                offset: 0.8,
+                                color: 'rgba(17,235,210, 0)'
+                            }], false),
+                            shadowColor: 'rgba(0, 0, 0, 0.1)',
+                            shadowBlur: 10
+                        }
+                    },
+                    itemStyle: {
+                        normal: {
+
+                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                                offset: 0,
+                                color: 'rgba(16,97,204,1)'
+                            }, {
+                                offset: 1,
+                                color: 'rgba(17,235,210,1)'
+                            }])
+                        },
+                        emphasis: {
+                            color: 'rgb(0,196,132)',
+                            borderColor: 'rgba(0,196,132,0.2)',
+                            extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
+                            borderWidth: 10
+                        }
+                    },
+                    data: [220, 182, 191, 134, 150, 120, 110, 125]
+                }, {
+                    name: '电信',
+                    type: 'line',
+                    smooth: true,
+                    symbol: 'circle',
+                    symbolSize: 5,
+                    showSymbol: false,
+                    lineStyle: {
+                        normal: {
+                            width: 3
+                        }
+                    },
+                    areaStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: 'rgba(205,52,42, 0.5)'
+                            }, {
+                                offset: 0.8,
+                                color: 'rgba(235,235,21, 0)'
+                            }], false),
+                            shadowColor: 'rgba(0, 0, 0, 0.1)',
+                            shadowBlur: 10
+                        },
+                    },
+                    itemStyle: {
+                        normal: {
+
+                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+                                offset: 0,
+                                color: 'rgba(205,52,42,1)'
+                            }, {
+                                offset: 1,
+                                color: 'rgba(235,235,21,1)'
+                            }])
+                        },
+                        emphasis: {
+                            color: 'rgb(99,250,235)',
+                            borderColor: 'rgba(99,250,235,0.2)',
+                            extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
+                            borderWidth: 10
+                        }
+                    },
+                    data: [120, 110, 125, 145, 122, 165, 122, 220]
+                }]
+            };;
+            myChart5.setOption(option5);
+            var myChart6 = echarts.init(document.querySelector("#echart6"));
+            var option6 = {
+
+                grid: {
+                    left: '2%',
+                    right: '4%',
+                    top: '18%',
+                    bottom: '1%',
+                    containLabel: true
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        crossStyle: {
+                            color: '#999'
+                        }
+                    }
+                },
+                legend: {
+                    show: true,
+                    right: '120',
+                    y: '10',
+                    icon: 'stack',
+                    itemWidth: 10,
+                    itemHeight: 10,
+                    textStyle: {
+                        color: '#D0DEEE'
+                    },
+
+                    // nameTextStyle:{
+                    //         color: '#D0DEEE'
+                    //     },
+                    data: ['不合格比例', '不合格数量', '浏览量']
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        boundaryGap: true,
+                        axisLabel: {
+                            color: fontColor
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#397cbc'
+                            }
+                        },
+                        axisTick: {
+                            show: false,
+                        },
+                        splitLine: {
+                            show: false,
+                            lineStyle: {
+                                color: '#2B3241'
+                            }
+                        },
+                        data: []
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '数量',
+                        nameTextStyle: {
+                            color: '#D0DEEE'
+                        },
+                        min: 0,
+                        max: 1000,
+                        axisLabel: {
+                            formatter: '{value}',
+                            textStyle: {
+                                color: '#D0DEEE'
+                            }
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                color: '#27b4c2'
+                            }
+                        },
+                        axisTick: {
+                            show: false,
+                        },
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#2B3241'
+                            }
+                        }
+                    },
+                    {
+                        type: 'value',
+                        name: '比例',
+                        nameTextStyle: {
+                            color: '#D0DEEE'
+                        },
+                        min: 0,
+                        max: 100,
+                        axisLabel: {
+                            formatter: '{value} %',
+                            textStyle: {
+                                color: '#D0DEEE'
+                            }
+                        },
+                        axisLine: {
+                            lineStyle: {
+                                color: '#27b4c2'
+                            }
+                        },
+                        axisTick: {
+                            show: false,
+                        },
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                color: '#2B3241'
+                            }
+                        }
+                    },
+                ],
+                series: [
+                    {
+                        name: '不合格比例',
+                        type: 'line',
+                        stack: '总量',
+                        symbol: 'circle',
+                        symbolSize: 8,
+                        yAxisIndex: 1,
+                        itemStyle: {
+                            normal: {
+                                color: '#5260CE',
+                                lineStyle: {
+                                    color: "#5260CE",
+                                    width: 1
+                                },
+
+                            }
+                        },
+                        data: []
+                    },
+                    {
+                        name: '不合格比例',
+                        type: 'line',
+                        stack: '总量',
+                        symbol: 'circle',
+                        symbolSize: 8,
+                        yAxisIndex: 1,
+                        itemStyle: {
+                            normal: {
+                                color: '#88E4E3',
+                                lineStyle: {
+                                    color: "#88E4E3",
+                                    width: 1
+                                },
+
+                            }
+                        },
+                        data: []
+                    },
+                    {
+                        name: '不合格数量',
+                        data: [],
+                        type: 'bar',
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: 'rgba(180, 180, 180, 0.2)'
+                        },
+                        itemStyle: {
+                            normal: {
+                                barBorderRadius: 5,
+                                color: new echarts.graphic.LinearGradient(
+                                    0, 0, 0, 1,
+                                    [
+                                        { offset: 0, color: '#586AF2' },
+                                        { offset: 1, color: '#1C293A' }
+                                    ]
+                                )
+                            }
+                        },
+                    },
+                    {
+                        name: '不合格数量',
+                        data: [],
+                        type: 'bar',
+                        showBackground: true,
+                        backgroundStyle: {
+                            color: 'rgba(180, 180, 180, 0.2)'
+                        },
+                        itemStyle: {
+                            normal: {
+                                barBorderRadius: 5,
+                                color: new echarts.graphic.LinearGradient(
+                                    0, 0, 0, 1,
+                                    [
+                                        { offset: 0, color: "#66E1DF" },
+                                        { offset: 1, color: "#005954" },
+                                    ]
+                                )
+                            }
+                        },
+                    }
+                ]
+
+            };
+            myChart6.setOption(option6);
+            getMonthOfYearContrast({
+                typeCode: 'produce',
+                factoryCode: 'ds_' + _this.selectxt,
+            }).then((response) => {
+                if (response) {
+                    let seriesdata1 = response[0].dataBarArrays
+                    let seriesdata2 = response[0].dataLineArrays
+                    let xAxisdata = response[0].dayStr
+                    let seriesdata3 = response[1].dataBarArrays
+                    let seriesdata4 = response[1].dataLineArrays
+                    let max1 = Math.max(...seriesdata1) + 5
+                    let max2 = Math.max(...seriesdata3) + 5
+                    let max3 = Math.max(...seriesdata2) + 5
+                    let max4 = Math.max(...seriesdata4) + 5
+                    let yAxismax1 = 0
+                    let yAxismax2 = 0
+                    if (max1 > max2) {
+                        yAxismax1 = max1
+                    } else {
+                        yAxismax1 = max2
+                    }
+                    if (max3 > max4) {
+                        yAxismax2 = max3
+                    } else {
+                        yAxismax2 = max4
+                    }
+                    option6 = {
+                        xAxis: [
+                            {
+                                data: xAxisdata,
+                            },
+                        ],
+                        yAxis: [
+                            {
+                                max: yAxismax1
+                            },
+                            {
+                                max: yAxismax2
+                            }
+                        ],
+                        series: [
+                            {
+                                data: seriesdata2,
+                            },
+                            {
+                                data: seriesdata4,
+                            },
+                            {
+                                data: seriesdata1,
+                            },
+                            {
+                                data: seriesdata3,
+                            }
+                        ]
+                    };
+                    myChart6.setOption(option6);
+                }
+            });
+        },
         //左侧第一个选择类型下拉框 回调函数
     },
 };
@@ -755,7 +1203,8 @@ export default {
                                     font-weight: 500;
                                     color: #FFFFFF;
                                     text-align: center;
-                                    border-bottom: 1px dashed #6C8097
+                                    border-bottom: 1px solid #6C8097;
+                                    // border-left: 1px dashed #6C8097;
                                 }
                             }
                         }
@@ -792,10 +1241,9 @@ export default {
                 }
 
                 .table-tbody {
-                    height: 336px;
+                    height: 144px;
                     // width: 1775px;
                     margin: auto;
-                    overflow-y: scroll;
 
                     table {
                         width: 100%;
@@ -809,7 +1257,7 @@ export default {
                                 font-weight: 500;
                                 color: #FFFFFF;
                                 text-align: center;
-                                border-bottom: 1px dashed #6C8097
+                                border: 1px dashed #6C8097
                             }
                         }
                     }
@@ -818,15 +1266,29 @@ export default {
 
             .item-table1:first-child {}
 
-            .item-table1 {
-                flex: 1;
+            .Realtime {
+                .Realtime-box {
+                    display: flex;
 
-                // .table-thead {
-                //   width: 565.01px;
-                // }
+                    .box {
+                        display: flex;
+                        align-items: flex-start;
+                        margin-right: 19px;
 
-                .table-tbody {
-                    height: 336px;
+                        .item {
+                            font-weight: 500;
+                            font-size: 15px;
+                            color: #FFFFFF;
+                            margin-left: 12px;
+
+                            .itemtitle {}
+
+                            .itemnumber {
+                                margin-top: 8px;
+                                color: #1DBDF2;
+                            }
+                        }
+                    }
                 }
             }
         }
@@ -853,8 +1315,16 @@ export default {
 }
 
 .titlebox2 {
+    display: flex;
+    align-items: center;
+
+    .icon {
+        margin-right: 10px;
+    }
+
     .titlename {
         font-weight: 400;
+        margin-right: 28px;
         font-size: 17px;
         color: #FFFFFF;
         line-height: 26px;
diff --git a/src/views/kanban/finishproduct/index.vue b/src/views/kanban/finishproduct/index.vue
index 1e11ab4..352a5e7 100644
--- a/src/views/kanban/finishproduct/index.vue
+++ b/src/views/kanban/finishproduct/index.vue
@@ -100,7 +100,6 @@ export default {
         this.valueForTopLeftCmp.sumplanquantity = response.data.sumplanquantity ?? 0;;
         this.valueForTopLeftCmp.sumFinshQuantity = response.data.sumFinshQuantity ?? 0;;
         this.valueForTopMiddleCmp = response.data.daySenvenProductionList;
-        response.data.ProductionInProgress = []
         this.BottomRightTableValue = response.data.ProductionInProgress;
         // this.initChart1()