@import "@/styles/mixin.scss";

.package-line-page {
    width: 3840px;
    height: 2160px;
    background: #7a809f;
    background-image: url(../../assets/images/Monitoring/package_line_bg.png);
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;

    div {
        @-webkit-keyframes opacityImg {
            from { opacity: 0.5;}
            50% { opacity: 1;}
            to { opacity: 0.5;}
        }
        img{-webkit-animation-iteration-count: infinite;}
        .opacityImg{-webkit-animation-name:opacityImg;-webkit-animation-duration:1s; -webkit-animation-timing-function: linear}
    }
    .dm11-pack {
        position: absolute;
        left: 2094px;
        top: 165px;
        z-index: 1;
    }
    .dm10-pack {
        position: absolute;
        left: 2181px;
        top: 190px;
        z-index: 2;
    }
    .dm09-pack {
        position: absolute;
        left: 2272px;
        top: 217px;
        z-index: 3;
    }
    .dm08-pack {
        position: absolute;
        left: 2368px;
        top: 245px;
        z-index: 4;
    }
    .dm06-pack {
        position: absolute;
        left: 2469px;
        top: 277px;
        z-index: 6;
    }
    .dm07-pack {
        position: absolute;
        left: 2567px;
        top: 305px;
        z-index: 5;
    }
    .dm05-pack {
        position: absolute;
        left: 2742px;
        top: 354px;
        z-index: 7;
    }
    .dm04-pack {
        position: absolute;
        left: 2860px;
        top: 390px;
        z-index: 8;
    }
    .dm03-pack {
        position: absolute;
        left: 2992px;
        top: 428px;
        z-index: 9;
    }
    .dm01-pack {
        position: absolute;
        left: 3119px;
        top: 466px;
        z-index: 10;
    }
    .dm02-pack {
        position: absolute;
        left: 3257px;
        top: 507px;
        z-index: 11;
    }
    .dm17-pack {
        position: absolute;
        left: 2022px;
        top: 250px;
        z-index: 12;
    }
    .dm16-pack {
        position: absolute;
        left: 2104px;
        top: 275px;
        z-index: 13;
    }
    .dm15-pack {
        position: absolute;
        left: 2186px;
        top: 301px;
        z-index: 14;
    }
    .dm14-pack {
        position: absolute;
        left: 2270px;
        top: 326px;
        z-index: 15;
    }
    .dm12-pack {
        position: absolute;
        left: 2355px;
        top: 353px;
        z-index: 16;
    }
    .dm13-pack {
        position: absolute;
        left: 2443px;
        top: 380px;
        z-index: 17;
    }
    .dm21-pack {
        position: absolute;
        left: 2892px;
        top: 484px;
        z-index: 19;
    }
    .dm20-pack {
        position: absolute;
        left: 3006px;
        top: 518px;
        z-index: 18;
    }
    .dm19-pack {
        position: absolute;
        left: 3128px;
        top: 555px;
        z-index: 19;
    }
    .dm18-pack {
        position: absolute;
        left: 3249px;
        top: 595px;
        z-index: 20;
    }
    .dm22-pack {
        position: absolute;
        left: 2714px;
        top: 499px;
        z-index: 21;
    }
    .dm23-pack {
        position: absolute;
        left: 2811px;
        top: 528px;
        z-index: 22;
    }
    .dm24-pack {
        position: absolute;
        left: 2908px;
        top: 559px;
        z-index: 23;
    }
    .dm25-pack {
        position: absolute;
        left: 3008px;
        top: 591px;
        z-index: 24;
    }
    .dm26-pack {
        position: absolute;
        left: 3107px;
        top: 623px;
        z-index: 25;
    }
    .dm27-pack {
        position: absolute;
        left: 3213px;
        top: 656px;
        z-index: 26;
    }
    .db02-pack {
        position: absolute;
        left: 1644px;
        top: 272px;
        z-index: 27;
    }
    .db01-pack {
        position: absolute;
        left: 1741px;
        top: 304px;
        z-index: 28;
    }
    .db07-pack {
        position: absolute;
        left: 1261px;
        top: 258px;
        z-index: 41;
    }
    .db06-pack {
        position: absolute;
        left: 1357px;
        top: 291px;
        z-index: 42;
    }
    .db05-pack {
        position: absolute;
        left: 1446px;
        top: 321px;
        z-index: 43;
    }
    .db04-pack {
        position: absolute;
        left: 1558px;
        top: 357px;
        z-index: 44;
    }
    .db03-pack {
        position: absolute;
        left: 1656px;
        top: 392px;
        z-index: 45;
    }
    .bm28-pack {
        position: absolute;
        left: 1912px;
        top: 356px;
        z-index: 29;
    }
    .bm27-pack {
        position: absolute;
        left: 1996px;
        top: 384px;
        z-index: 30;
    }
    .bm26-pack {
        position: absolute;
        left: 2079px;
        top: 411px;
        z-index: 31;
    }
    .bm25-pack {
        position: absolute;
        left: 2165px;
        top: 441px;
        z-index: 32;
    }
    .bm24-pack {
        position: absolute;
        left: 2252px;
        top: 468px;
        z-index: 33;
    }
    .bm23-pack {
        position: absolute;
        left: 2343px;
        top: 498px;
        z-index: 34;
    }
    .bm22-pack {
        position: absolute;
        left: 2591px;
        top: 573px;
        z-index: 35;
    }
    .bm21-pack {
        position: absolute;
        left: 2697px;
        top: 609px;
        z-index: 36;
    }
    .bm20-pack {
        position: absolute;
        left: 2803px;
        top: 645px;
        z-index: 37;
    }
    .bm19-pack {
        position: absolute;
        left: 2925px;
        top: 683px;
        z-index: 38;
    }
    .bm18-pack {
        position: absolute;
        left: 3050px;
        top: 724px;
        z-index: 39;
    }
    .bm17-pack {
        position: absolute;
        left: 3175px;
        top: 768px;
        z-index: 40;
    }
    .bm34-pack {
        position: absolute;
        left: 1830px;
        top: 428px;
        z-index: 46;
    }
    .bm33-pack {
        position: absolute;
        left: 1915px;
        top: 456px;
        z-index: 47;
    }
    .bm32-pack {
        position: absolute;
        left: 1998px;
        top: 485px;
        z-index: 48;
    }
    .bm31-pack {
        position: absolute;
        left: 2087px;
        top: 515px;
        z-index: 49;
    }
    .bm30-pack {
        position: absolute;
        left: 2178px;
        top: 545px;
        z-index: 50;
    }
    .bm29-pack {
        position: absolute;
        left: 2269px;
        top: 577px;
        z-index: 51;
    }
    .bm16-pack {
        position: absolute;
        left: 2521px;
        top: 662px;
        z-index: 52;
    }
    .bm15-pack {
        position: absolute;
        left: 2627px;
        top: 699px;
        z-index: 53;
    }
    .bm14-pack {
        position: absolute;
        left: 2739px;
        top: 737px;
        z-index: 54;
    }
    .bm13-pack {
        position: absolute;
        left: 2860px;
        top: 778px;
        z-index: 55;
    }
    .bm12-pack {
        position: absolute;
        left: 2988px;
        top: 820px;
        z-index: 56;
    }
    .bm11-pack {
        position: absolute;
        left: 3115px;
        top: 864px;
        z-index: 57;
    }
    .bm40-pack {
        position: absolute;
        left: 1776px;
        top: 469px;
        z-index: 58;
    }
    .bm39-pack {
        position: absolute;
        left: 1861px;
        top: 498px;
        z-index: 59;
    }
    .bm38-pack {
        position: absolute;
        left: 1945px;
        top: 528px;
        z-index: 60;
    }
    .bm37-pack {
        position: absolute;
        left: 2035px;
        top: 558px;
        z-index: 61;
    }
    .bm36-pack {
        position: absolute;
        left: 2126px;
        top: 590px;
        z-index: 62;
    }
    .bm35-pack {
        position: absolute;
        left: 2218px;
        top: 622px;
        z-index: 63;
    }
    .bm10-pack {
        position: absolute;
        left: 2471px;
        top: 708px;
        z-index: 64;
    }
    .bm09-pack {
        position: absolute;
        left: 2580px;
        top: 748px;
        z-index: 65;
    }
    .bm08-pack {
        position: absolute;
        left: 2690px;
        top: 787px;
        z-index: 66;
    }
    .bm07-pack {
        position: absolute;
        left: 2815px;
        top: 831px;
        z-index: 67;
    }
    .bm06-pack {
        position: absolute;
        left: 2945px;
        top: 876px;
        z-index: 68;
    }
    .bm05-pack {
        position: absolute;
        left: 3073px;
        top: 921px;
        z-index: 69;
    }
    .bm04-pack {
        position: absolute;
        left: 2661px;
        top: 879px;
        z-index: 70;
    }
    .bm03-pack {
        position: absolute;
        left: 2778px;
        top: 922px;
        z-index: 71;
    }
    .bm02-pack {
        position: absolute;
        left: 2899px;
        top: 965px;
        z-index: 72;
    }
    .bm01-pack {
        position: absolute;
        left: 3019px;
        top: 1009px;
        z-index: 73;
    }
    .cso01-pack {
        position: absolute;
        left: 1531px;
        top: 484px;
        z-index: 77;
    }
    .cso02-pack {
        position: absolute;
        left: 1472px;
        top: 462px;
        z-index: 76;
    }
    .cso03-pack {
        position: absolute;
        left: 1415px;
        top: 442px;
        z-index: 75;
    }
    .cso04-pack {
        position: absolute;
        left: 1357px;
        top: 420px;
        z-index: 74;
    }
    .mw01-pack {
        position: absolute;
        left: 1000px;
        top: 394px;
        z-index: 78;
    }
    .mw02-pack {
        position: absolute;
        left: 1054px;
        top: 415px;
        z-index: 79;
    }
    .mw03-pack {
        position: absolute;
        left: 1112px;
        top: 437px;
        z-index: 80;
    }
    .mw04-pack {
        position: absolute;
        left: 1168px;
        top: 458px;
        z-index: 81;
    }
    .mw05-pack {
        position: absolute;
        left: 1226px;
        top: 480px;
        z-index: 82;
    }
    .mw06-pack {
        position: absolute;
        left: 1285px;
        top: 502px;
        z-index: 83;
    }
    .mw07-pack {
        position: absolute;
        left: 1345px;
        top: 524px;
        z-index: 84;
    }
    .mw08-pack {
        position: absolute;
        left: 1405px;
        top: 546px;
        z-index: 85;
    }
    .mw09-pack {
        position: absolute;
        left: 1469px;
        top: 570px;
        z-index: 86;
    }
    .mw10-pack {
        position: absolute;
        left: 932px;
        top: 497px;
        z-index: 87;
    }
    .mw11-pack {
        position: absolute;
        left: 994px;
        top: 519px;
        z-index: 88;
    }
    .mw12-pack {
        position: absolute;
        left: 1053px;
        top: 543px;
        z-index: 89;
    }
    .mw13-pack {
        position: absolute;
        left: 1111px;
        top: 566px;
        z-index: 90;
    }
    .mw14-pack {
        position: absolute;
        left: 1171px;
        top: 589px;
        z-index: 91;
    }
    .mw15-pack {
        position: absolute;
        left: 1232px;
        top: 614px;
        z-index: 92;
    }
    .mw16-pack {
        position: absolute;
        left: 1294px;
        top: 638px;
        z-index: 93;
    }
    .mw17-pack {
        position: absolute;
        left: 1358px;
        top: 663px;
        z-index: 94;
    }
    .pw04-pack {
        position: absolute;
        left: 819px;
        top: 553px;
        z-index: 95;
    }
    .pw03-pack {
        position: absolute;
        left: 917px;
        top: 591px;
        z-index: 96;
    }
    .pw01-pack {
        position: absolute;
        left: 1019px;
        top: 630px;
        z-index: 97;
    }
    .pw02-pack {
        position: absolute;
        left: 1120px;
        top: 670px;
        z-index: 98;
    }
    .msw02-pack {
        position: absolute;
        left: 706px;
        top: 671px;
        z-index: 99;
    }
    .msw01-pack {
        position: absolute;
        left: 829px;
        top: 724px;
        z-index: 100;
    }
    .msw03-pack {
        position: absolute;
        left: 952px;
        top: 777px;
        z-index: 101;
    }
    .msw04-pack {
        position: absolute;
        left: 607px;
        top: 743px;
        z-index: 102;
    }
    .msw05-pack {
        position: absolute;
        left: 862px;
        top: 853px;
        z-index: 103;
    }
    .asw02-pack {
        position: absolute;
        left: 424px;
        top: 810px;
        z-index: 104;
    }
    .asw01-pack {
        position: absolute;
        left: 667px;
        top: 922px;
        z-index: 105;
    }
    .pc01-pack {
        position: absolute;
        left: 1248px;
        top: 778px;
        z-index: 106;
    }
    .pc02-pack {
        position: absolute;
        left: 1102px;
        top: 844px;
        z-index: 107;
    }
    .fcm32-pack {
        position: absolute;
        left: 1650px;
        top: 595px;
        z-index: 108;
    }
    .fcm31-pack {
        position: absolute;
        left: 1759px;
        top:633px;
        z-index: 109;
    }
    .fcm30-pack {
        position: absolute;
        left: 1869px;
        top:674px;
        z-index: 110;
    }
    .fcm29-pack {
        position: absolute;
        left: 1986px;
        top:714px;
        z-index: 111;
    }
    .fcm28-pack {
        position: absolute;
        left: 2101px;
        top:757px;
        z-index: 112;
    }
    .fcm33-pack {
        position: absolute;
        left: 2023px;
        top: 828px;
        z-index: 117;
    }
    .fcm34-pack {
        position: absolute;
        left: 1904px;
        top: 782px;
        z-index: 116;
    }
    .fcm35-pack {
        position: absolute;
        left: 1787px;
        top: 739px;
        z-index: 115;
    }
    .fcm36-pack {
        position: absolute;
        left: 1674px;
        top: 696px;
        z-index: 114;
    }
    .fcm37-pack {
        position: absolute;
        left: 1564px;
        top: 653px;
        z-index: 113;
    }
    .fcm42-pack {
        position: absolute;
        left: 1494px;
        top: 720px;
        z-index: 118;
    }
    .fcm41-pack {
        position: absolute;
        left: 1607px;
        top: 761px;
        z-index: 119;
    }
    .fcm40-pack {
        position: absolute;
        left: 1719px;
        top: 805px;
        z-index: 120;
    }
    .fcm39-pack {
        position: absolute;
        left: 1839px;
        top: 852px;
        z-index: 121;
    }
    .fcm38-pack {
        position: absolute;
        left: 1958px;
        top: 900px;
        z-index: 122;
    }
    .fcm47-pack {
        position: absolute;
        left: 1400px;
        top: 786px;
        z-index: 123;
    }
    .fcm46-pack {
        position: absolute;
        left: 1513px;
        top: 832px;
        z-index: 124;
    }
    .fcm45-pack {
        position: absolute;
        left: 1629px;
        top: 879px;
        z-index: 125;
    }
    .fcm44-pack {
        position: absolute;
        left: 1752px;
        top: 924px;
        z-index: 126;
    }
    .fcm43-pack {
        position: absolute;
        left: 1872px;
        top: 976px;
        z-index: 127;
    }
    .fcm52-pack {
        position: absolute;
        left: 1321px;
        top: 860px;
        z-index: 128;
    }
    .fcm51-pack {
        position: absolute;
        left: 1434px;
        top: 907px;
        z-index: 129;
    }
    .fcm50-pack {
        position: absolute;
        left: 1554px;
        top: 956px;
        z-index: 130;
    }
    .fcm49-pack {
        position: absolute;
        left: 1673px;
        top: 1007px;
        z-index: 131;
    }
    .fcm48-pack {
        position: absolute;
        left: 1797px;
        top: 1058px;
        z-index: 132;
    }
    .fcm57-pack {
        position: absolute;
        left: 1216px;
        top: 934px;
        z-index: 133;
    }
    .fcm56-pack {
        position: absolute;
        left: 1334px;
        top: 984px;
        z-index: 134;
    }
    .fcm55-pack {
        position: absolute;
        left: 1453px;
        top: 1036px;
        z-index: 135;
    }
    .fcm54-pack {
        position: absolute;

        left: 1574px;
        top: 1090px;
        z-index: 136;
    }
    .fcm53-pack {
        position: absolute;
        left: 1700px;
        top: 1146px;
        z-index: 137;
    }
    .imm-pack {
        position: absolute;
        left: 893px;
        top: 1105px;
        z-index: 138;
    }
    .mm02-pack {
        position: absolute;
        left: 1238px;
        top: 1285px;
        z-index: 139;
    }
    .mm01-pack {
        position: absolute;
        left: 1415px;
        top: 1324px;
        z-index: 140;
    }
    .fcm26-pack {
        position: absolute;
        left: 2418px;
        top: 886px;
        z-index: 141;
    }
    .fcm25-pack {
        position: absolute;
        left: 2541px;
        top: 930px;
        z-index: 142;
    }
    .fcm24-pack {
        position: absolute;
        left: 2669px;
        top: 978px;
        z-index: 143;
    }
    .fcm23-pack {
        position: absolute;
        left: 2801px;
        top: 1026px;
        z-index: 144;
    }
    .fcm22-pack {
        position: absolute;
        left: 2935px;
        top: 1077px;
        z-index: 145;
    }
    .fcm27-pack {
        position: absolute;
        left: 2366px;
        top: 938px;
        z-index: 146;
    }
    .fcm21-pack {
        position: absolute;
        left: 2492px;
        top: 986px;
        z-index: 147;
    }
    .fcm20-pack {
        position: absolute;
        left: 2622px;
        top: 1035px;
        z-index: 148;
    }
    .fcm19-pack {
        position: absolute;
        left: 2757px;
        top: 1086px;
        z-index: 149;
    }
    .fcm18-pack {
        position: absolute;
        left: 2890px;
        top: 1138px;
        z-index: 150;
    }
    .fcm17-pack {
        position: absolute;
        left: 2415px;
        top: 1085px;
        z-index: 151;
    }
    .fcm16-pack {
        position: absolute;
        left: 2547px;
        top: 1138px;
        z-index: 152;
    }
    .fcm15-pack {
        position: absolute;
        left: 2687px;
        top: 1191px;
        z-index: 153;
    }
    .fcm14-pack {
        position: absolute;
        left: 2824px;
        top: 1246px;
        z-index: 154;
    }
    .fcm13-pack {
        position: absolute;
        left: 2349px;
        top: 1157px;
        z-index: 155;
    }
    .fcm12-pack {
        position: absolute;
        left: 2484px;
        top: 1213px;
        z-index: 156;
    }
    .fcm11-pack {
        position: absolute;
        left: 2624px;
        top: 1269px;
        z-index: 157;
    }
    .fcm10-pack {
        position: absolute;
        left: 2764px;
        top: 1327px;
        z-index: 158;
    }
    .fcm05-pack {
        position: absolute;
        left: 2136px;
        top: 1211px;
        z-index: 159;
    }
    .fcm04-pack {
        position: absolute;
        left: 2266px;
        top: 1265px;
        z-index: 160;
    }
    .fcm03-pack {
        position: absolute;
        left: 2400px;
        top: 1323px;
        z-index: 161;
    }
    .fcm02-pack {
        position: absolute;
        left: 2547px;
        top: 1383px;
        z-index: 162;
    }
    .fcm01-pack {
        position: absolute;
        left: 2691px;
        top: 1445px;
        z-index: 163;
    }
    .fcm09-pack {
        position: absolute;
        left: 2063px;
        top: 1291px;
        z-index: 164;
    }
    .fcm08-pack {
        position: absolute;
        left: 2194px;
        top: 1348px;
        z-index: 165;
    }
    .fcm07-pack {
        position: absolute;
        left: 2331px;
        top: 1407px;
        z-index: 167;
    }
    .fcm06-pack {
        position: absolute;
        left: 2480px;
        top: 1472px;
        z-index: 168;
    }
    .device-number {
        position: absolute;
        font-size: 72px;
        color: #349bf7;
        font-family: DS-Digital;
        left: 701px;
        top: 70px;
        z-index: 169;
    }
    .device-abnormal-number {
        position: absolute;
        font-size: 72px;
        color: #349bf7;
        font-family: DS-Digital;
        left: 1210px;
        top: 66px;
        z-index: 169;
    }
    .device-chart {
        position: absolute;
        left: 0;
        top: 1640px;
        width: 3800px;
        height: 500px;
        padding: 20px;
        background: rgba(35, 39, 46, 0.7);
        z-index: 169;
        display: -webkit-flex;
        display: flex;

        .device-chart-warning {
            width: 707px;
            height: 440px;
            padding: 20px;
            border: 1px solid #7098D6;
            z-index: 169;

            .warning-header {
                height: 64px;
                width: 100%;
                line-height: 64px;
                text-align: center;
                background: rgba(0, 124, 255, 0.16);
                border: 1px solid #007cff;
                color: #fff;
                font-size: 30px;
                z-index: 169;
                font-weight: bold;
            }
            ::-webkit-scrollbar {width: 1px;height: 1px;}
            .warning-main {
                overflow: auto;
                margin-top: 20px;
                width: 709px;
                height: 367px;
                z-index: 169;
                clear: both;

                .el-row {
                    margin: 0 0 20px 0!important;
                    &:last-child {
                        margin-bottom: 0;
                    }
                }
                .el-col {
                    border-radius: 4px;

                    .warning-left {
                        padding-left: 20px;
                        height: 40px;
                        line-height: 40px;
                        color: red;
                        z-index: 169;
                        background: rgba(0, 124, 255, 0.16);
                    }
                    .warning-right {
                        height: 40px;
                        line-height: 40px;
                        color: red;
                        padding-left: 20px;
                        z-index: 169;
                        background: rgba(0, 124, 255, 0.16);
                    }
                }
            }

            .no-data {
                position: absolute;
                left: 242px;
                top: 277px;
                width: 300px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                color: #fff;
                font-size: 22px;
            }
        }
        .equipment-status {
            width: 1254px;
            height: 440px;
            padding: 20px;
            border: 1px solid #7098D6;
            z-index: 169;
            margin-left: 25px;

            .echarts-pack {
                width: 1254px;
                height: 450px;
            }
        }
        .equipment-oee {
            width: 1000px;
            height: 440px;
            padding: 20px;
            border: 1px solid #7098D6;
            z-index: 169;
            margin-left: 25px;

            .title-pack {
                width: 960px;
                height: 50px;
                line-height: 50px;
                color: #fff;
                font-size: 30px;
                font-weight: bold;
            }
            .oee-main-pack {
                height: 390px;
                line-height: 390px;
                width: 960px;
                text-align: center;
                color: #fff;
                font-size: 20px;
            }
        }
        .workshop {
            width: 600px;
            height: 440px;
            padding: 20px;
            border: 1px solid #7098D6;
            z-index: 169;
            margin-left: 25px;

            .workshop-title {
                width: 560px;
                height: 50px;
                line-height: 50px;
                color: #fff;
                font-size: 30px;
                font-weight: bold;
            }
            .workshop-main {
                height: 390px;
                line-height: 390px;
                width: 560px;
                text-align: center;
                color: #fff;
                font-size: 20px;
            }
        }
    }
}

