<template>
    <div class="testdiv">
        <!-- 看板标题 -->
        <div class="top_title">
            <p>备刀需求看板</p>

            <!-- <img :src="imgLogo" alt class="logo" v-on:click="back" /> -->
            <div class="times_bg">{{nowTime}}</div>
            <!-- <Icon class="backBtn" type="md-arrow-round-back" size="40" v-on:click="back" /> -->
            <div class="IconSetting">
                <img src="../../../static/images/setting.svg" alt @click="setting()" />
            </div>
        </div>
        <!-- 弹出框 -->
        <Modal
            class="settingmodal"
            title
            v-model="settingmodal"
            :styles="{position:'fixed',top:'60px',right:'35px',width:'200px'}"
        >
            <!-- <div class="modal_body" style="width:430px!important;padding:0 0px;">
                <div class="out_row">
                    <label>查询其他日期:</label>
                    <DatePicker
                        class="publicinput"
                        type="date"
                        v-model="datetime"
                        placeholder
                        style="width:200px;margin-left:9px;"
                    ></DatePicker>
                </div>
            </div>-->
            <div slot="footer">
                <Button type="text" size="large" @click="settingmodal = false">{{$t("1033")}}</Button>
                <!-- <Button type="primary" size="large" @click="settingadd()">{{$t("900552")}}</Button> -->
                <Button type="primary" size="large" v-on:click="back">退出看板</Button>
            </div>
        </Modal>
        <!-- 看板标题 end -->
        <!-- 看板内容 -->
        <div class="container">
            <!-- 左边看板 -->

            <!-- 中间看板 -->
            <div class="formBox_middle">
                <!-- 通道图像 -->

                <!-- 通道图像 end -->

                <!-- 安灯异常表格 -->
                <div class="middle_bottom">
                    <div class="title">产品备刀列表</div>

                    <ul class="table_title_bg">
                        <!-- <li>工单号</li> -->
                        <li>产品名称</li>
                        <li>加工设备</li>
                        <li>刀具号</li>
                        <li>刀位号</li>
                        <li>需求时间</li>
                        <li>领用人</li>
                        <!-- <li style="flex:2">推荐库位</li>
                        <li>当前库存</li>-->
                    </ul>

                    <swiper
                        ref="mySwiper"
                        :options="swiperOptions1"
                        style="width:100%;height:360px;color:#fff;"
                    >
                        <swiper-slide v-for="(item,index) in tool_prepare" :key="index">
                            <ul class="tableDetail">
                                <li v-for="(item,index) in item" :key="index">
                                    <!-- <div>{{item.orderNumber}}</div> -->
                                    <div>{{item.productName}}</div>
                                    <div>{{item.machineName}}</div>
                                    <!-- <Tooltip :content="item.materialName" :transfer="true">
                                        {{item.materialName}}
                                    </Tooltip>-->
                                    <div>{{item.toolCode}}</div>
                                    <div>{{item.toolLocation}}</div>
                                    <div>{{item.needTime}}</div>
                                    <div>{{item.userName}}</div>

                                    <!-- <Tooltip :content="item.location" :transfer="true">
                                        {{item.location}}
                                    </Tooltip>-->
                                    <!-- <div style="flex:2;font-size:12px">{{item.location}}</div>

                                    <div>{{item.count}}</div>-->
                                </li>
                            </ul>
                        </swiper-slide>
                        <!-- <swiper-slide v-else>
                            <ul class="tableDetail">
                                <li v-for="(item,index) in tool_prepare" :key="index">
                                    <div>{{item.orderNumber}}</div>
                                    <div>{{item.productName}}</div>
                                    <div>{{item.machineName}}</div>
                                    <div>{{item.materialName}}</div>
                                    <div>{{item.toolLocation}}</div>
                                    <div>{{item.needTime}}</div>
                                    <div>{{item.userName}}</div>
                                    <div>{{item.location}}</div>
                                    <div>{{item.count}}</div>
                                </li>
                            </ul>
                        </swiper-slide>-->
                    </swiper>
                    <!-- </div> -->

                    <!-- </vue-seamless-scroll> -->
                </div>
                <div class="middle_bottom1" style="margin-top:35px">
                    <div class="title">刀具寿命预警</div>
                    <div class="lifeMain">
                        <swiper
                            ref="mySwiper"
                            :options="swiperOptions2"
                            style="width:100%;height:400px;color:#fff;"
                        >
                            <swiper-slide v-for="(item,index) in toolLife" :key="index">
                                <div class="swiperbox">
                                    <div style="display:flex" v-for="(ele,i) in item" :key="i">
                                        <div class="item">
                                            <div
                                                class="name"
                                                v-bind:style="{ backgroundColor: ele.style}"
                                            >
                                                <span>{{ele.name}}-S1</span>
                                            </div>
                                            <p>
                                                <span>加工刀位</span>
                                                <span>{{ele.location}}</span>
                                            </p>
                                            <p>
                                                <span>剩余寿命</span>
                                                <span>{{ele.toolLife}}</span>
                                            </p>
                                            <p>
                                                <span>刀具编号</span>
                                                <span>{{ele.toolNumber}}</span>
                                            </p>
                                        </div>
                                        <div class="item">
                                            <div
                                                class="name"
                                                v-bind:style="{ backgroundColor: ele.style}"
                                            >
                                                <span>{{ele.name}}-S2</span>
                                            </div>
                                            <p>
                                                <span>加工刀位</span>
                                                <span>{{ele.location}}</span>
                                            </p>
                                            <p>
                                                <span>剩余寿命</span>
                                                <span>{{ele.toolLife2}}</span>
                                            </p>
                                            <p>
                                                <span>刀具编号</span>
                                                <span>{{ele.toolNumber2}}</span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </swiper-slide>
                            <!-- <swiper-slide v-else>
                                <div class="swiperbox">
                                    <div class="item" v-for="(item,i) in toolLife" :key="i">
                                        <div v-bind:style="{ backgroundColor: item.style}">
                                            <span>{{item.name}}</span>
                                        </div>
                                        <p>
                                            <span>加工刀位</span>
                                            <span>{{item.location}}</span>
                                        </p>
                                        <p>
                                            <span>剩余寿命</span>
                                            <span>{{item.toolLife}}</span>
                                        </p>
                                        <p>
                                            <span>刀具编号</span>
                                            <span>{{item.toolNumber}}</span>
                                        </p>
                                    </div>
                                </div>
                            </swiper-slide>-->
                        </swiper>
                    </div>
                </div>
            </div>

            <!-- 中间看板 end -->

            <!-- 右边看板 -->
            <div class="formBox_left formBox_right">
                <!-- 刀具库存报警 -->
                <div class="formBox compre_analysis">
                    <div class="form_title">刀具使用量</div>
                    <div class="formMain table_bg">
                        <div id="main" style="width:100%;height:360px"></div>
                    </div>
                </div>
                <!-- 各通道一次合格率 end -->

                <!-- 刀具库存报警 -->
                <div class="formBox">
                    <div class="form_title">刀具库存报警</div>

                    <div class="formMain table_bg pieBox">
                        <swiper
                            ref="mySwiper"
                            :options="swiperOptions"
                            style="width:100%;height:385px;color:#fff;"
                        >
                            <swiper-slide v-for="(item,i) in stockList" :key="i">
                                <div class="box" style="width:100%;">
                                    <div class="item" v-for="(ele,i) in item" :key="i">
                                        <p class="name">{{ele.material_name}}</p>
                                        <div>
                                            <p class="count">{{ele.quantity}}</p>
                                            <p class="location">{{ele.location}}</p>
                                        </div>
                                    </div>
                                </div>
                            </swiper-slide>
                            <!-- <swiper-slide v-else>
                                <div class="box" style="width:100%;">
                                    <div class="item" v-for="(ele,i) in stockList" :key="i">
                                        <p class="name">{{ele.material_name}}</p>
                                        <div>
                                            <p class="count">{{ele.quantity}}</p>
                                            <p class="location">{{ele.location}}</p>
                                        </div>
                                    </div>
                                </div>
                            </swiper-slide>-->
                        </swiper>
                    </div>
                </div>
            </div>
            <!-- 右边看板 end -->
        </div>
        <!-- 看板内容 end -->
    </div>
</template>
<script>
// import moment from 'moment'
import axios from "@/libs/api.request";
import echarts from "echarts";
import vueSeamlessScroll from "vue-seamless-scroll";
import moment from "moment";
// import 'swiper/dist/css/swiper.css'    //在全局没引入，这里记得要！
// import { swiper, swiperSlide } from 'vue-awesome-swiper'

import { initRouter } from "@/libs/router-util"; // 新增  引入动态菜单渲染
import { localSave } from "@/libs/util";

export default {
    components: {
        // 组件
        vueSeamlessScroll,
    },
    data() {
        return {
            swiperOptions1: {
                loop: this.loop1,
                autoplay: {
                    delay: 5000, // 时间 毫秒
                    disableOnInteraction: false, // 默认true,用户操作之后是否停止自动轮播
                },
                direction: "vertical",
            },
            swiperOptions2: {
                loop: this.loop2,
                autoplay: {
                    delay: 3000, // 时间 毫秒
                    disableOnInteraction: false, // 默认true,用户操作之后是否停止自动轮播
                },
                direction: "vertical",
                // fadeEffect: true,
            },
            loop1: false,
            loop2: false,
            loop: false,
            swiperOptions: {
                loop: this.loop,
                autoplay: {
                    delay: 3000, // 时间 毫秒
                    disableOnInteraction: false, // 默认true,用户操作之后是否停止自动轮播
                },
                direction: "vertical",
            },
            imgLogo: require("../../../static/images/siger.png"), // logo
            settingmodal: false, // 设置弹出框
            datetime: moment(new Date().getTime()).format("YYYY-MM-DD"),
            nowTime: moment(new Date().getTime()).format("YYYY-MM-DD"), // 当前时间

            image: require("../../../static/images/u451.png"),
            grayImg: require("../../../static/images/u453.png"),
            htmlList: [], // 亮圈数组
            grayImgList: [], // 灰圈数组

            tableData4: [],
            tool_prepare: [],
            toolLife: [],
            stockList: [],
            toolUSex: [],
            toolUSey: [],
            styleObject: {
                backgroundColor: "",
            },
        };
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.$swiper;
        },
    },
    created() {
        this.$nextTick(() => {
            this.getPreparationList();
            this.getToolLife();

            this.getStockWarning();
            this.getToolUse();
        });
    },
    mounted() {
        this.timer = setInterval(() => {
            this.getToolLife();
        }, 2000);
        this.timer2 = setInterval(() => {
            this.getPreparationList();

            this.getStockWarning();
            this.getToolUse();
        }, 60000);
    },
    beforeDestroy() {
        if (this.timer) {
            // 如果定时器还在运行 或者直接关闭，不用判断
            clearInterval(this.timer); // 关闭
        }
        if (this.timer2) {
            clearInterval(this.timer2);
        }
    },
    methods: {
        // 产品备刀列表
        getPreparationList() {
            axios
                .request({
                    url: "/dashboard/DashboardTlm/ToolPreparationList",
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        let arr = res.data.data;
                        if (arr.length > 7) {
                            this.loop1 = true;
                        }
                        this.setSwiper(arr, 7, 1);
                    }
                });
        },
        // 刀具寿命预警
        getToolLife() {
            // let data = {}
            this.request(
                "/dashboard/DashboardTlm/GetTooLifeData",
                "",
                "get"
            ).then((res) => {
                if (res.data.ret == 1) {
                    let arr = res.data.data;
                    // for (let i = 0; i < 20; i++) {
                    //     arr.push(arr[0]);
                    // }
                    arr.forEach((ele) => {
                        if (ele.state == 1 || ele.state == 2) {
                            ele.style = "orange";
                        }
                        if (ele.state == 3) {
                            ele.style = "green";
                        }
                        if (
                            ele.state == 4 ||
                            ele.state == 5 ||
                            ele.state == 6 ||
                            ele.state == 7
                        ) {
                            ele.style = "red";
                        }
                        if (ele.state == 0) {
                            ele.style = "";
                        }
                    });
                    this.setSwiper(arr, 18, 2);

                    if (arr.length > 18) {
                        this.loop2 = true;
                    }
                }
            });
        },
        // 刀具库存预警
        getStockWarning() {
            // let data = {}
            this.request(
                "/dashboard/DashboardTlm/GetStockAlarm",
                "",
                "get"
            ).then((res) => {
                if (res.data.ret == 1) {
                    let arr = res.data.data;
                    arr.forEach((ele) => {
                        let a = ele.location.split("->");
                        ele.location = a[a.length - 1];
                    });
                    // for (let i = 0; i < 20; i++) {
                    //     arr.push(arr[0]);
                    // }
                    this.setSwiper(arr, 9, 3);
                    if (arr.length > 9) {
                        this.loop2 = true;
                    }
                }
            });
        },
        // 刀具使用量
        getToolUse() {
            this.request("/dashboard/DashboardTlm/GetToolUse", "", "get").then(
                (res) => {
                    if (res.data.ret == 1) {
                        this.toolUSex = res.data.data.x;
                        this.toolUSey = res.data.data.y;
                        this.toEcharts();
                    }
                }
            );
        },
        setSwiper(arr = [], length, type) {
            let a = Math.ceil(arr.length / length);
            let array = [];
            // if (a > 1) {
            for (let i = 0; i < a; i++) {
                let ele = arr.slice(i * length, (i + 1) * length);
                array.push(ele);
            }
            console.log(array);
            if (type == 1) {
                this.tool_prepare = array;
            }
            if (type == 2) {
                this.toolLife = array;
            }
            if (type == 3) {
                this.stockList = array;
            }
            // }
        },

        // 刀具使用量
        toEcharts() {
            var myChart = echarts.init(document.getElementById("main"));

            // 指定图表的配置项和数据

            var option = {
                tooltip: {
                    show: true, // ---是否显示提示框,默认为true
                    trigger: "item", // ---数据项图形触发
                    axisPointer: {
                        // ---指示样式
                        type: "shadow",
                        axis: "auto",
                    },
                    padding: 5,
                    textStyle: {
                        // ---提示框内容样式
                        color: "#fff",
                    },
                },
                xAxis: {
                    type: "category",
                    data: this.toolUSex,
                    axisLine: {
                        lineStyle: {
                            color: "#C0C0C0",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#C0C0C0", // 坐标值得具体的颜色
                        },
                    },
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        textStyle: {
                            color: "#C0C0C0", // 坐标值得具体的颜色
                        },
                    },
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#C0C0C0",
                        },
                    },
                },
                series: [
                    {
                        data: this.toolUSey,
                        // data: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
                        type: "bar",
                        barWidth: 10,
                    },
                ],
            };
            myChart.setOption(option);
            // window.onresize = function () {
            //     myChart.resize();
            // };
        },
        request(url, data, type) {
            if (type == "get") {
                return this.axios
                    .request({
                        url: url,
                        params: data,
                        method: type,
                    })
                    .then((res) => {
                        return res;
                    })
                    .catch((error) => error);
            } else {
                return this.axios
                    .request({
                        url: url,
                        data,
                        method: type,
                    })
                    .then((res) => {
                        return res;
                    })
                    .catch((error) => error);
            }
        },
        // 各通道产量达成率--灰色圆圈

        request(url, data, type) {
            if (type == "get") {
                return this.axios
                    .request({
                        url: url,
                        params: data,
                        method: type,
                    })
                    .then((res) => {
                        return res;
                    })
                    .catch((error) => error);
            } else {
                return this.axios
                    .request({
                        url: url,
                        data,
                        method: type,
                    })
                    .then((res) => {
                        return res;
                    })
                    .catch((error) => error);
            }
        },
        setting() {
            this.settingmodal = true;
        },
        // 返回上一页
        back() {
            this.$router.go(-1); // 返回上一层
        },
        loadProduce() {
            this.datetime = moment(this.datetime).format("YYYY-MM-DD");
            var params = {
                section: 0,
            };
            this.axios
                .request({
                    url:
                        "dashboard/DashboardFactory/GetFactoryAchievement?date=" +
                        this.datetime,
                    params,
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        // 各通道oee--雷达图
                        var arr1 = [];
                        res.data.data.oees.forEach(function (item, index) {
                            var aee = {};
                            if (index === 0) {
                                aee.axisLabel = {
                                    show: true,
                                    textStyle: { fontSize: 16, color: "#fff" },
                                };
                            }
                            // 分母为0，不显示
                            if (item.denominator === 1) {
                                aee.name = item.name;
                            } else {
                                aee.name = item.name + "\n" + item.oee + "%";
                            }
                            aee.max = 100;
                            arr1.push(aee);
                        });
                        this.oeelist = arr1;
                        this.oeevalues = res.data.data.value;
                        this.passagewayList = res.data.data.produces;
                        this.staff = res.data.data.staff;
                        this.days = res.data.data.days;
                        this.oeeNum = res.data.data.oeeNum;
                        this.productActual = res.data.data.totalProduce;

                        // 强制两位小数
                        if (this.oeeNum > 0) {
                            if (this.oeeNum >= this.fac_oee) {
                                this.oeecolor = "#33ff33";
                            } else {
                                this.oeecolor = "red";
                            }
                            // 强制两位小数
                            let value_str = this.oeeNum;
                            value_str = (value_str + "").split(".");
                            if (value_str.length < 2) {
                                value_str.push("00");
                            }
                            this.oeeNum =
                                value_str[0] +
                                "." +
                                (value_str[1] + "00").slice(0, 2);
                        }
                    } else {
                    }

                    this.toEcharts(); // 各通道oee分布
                    this.toBar(); // 各通道一次合格率
                    this.grayImgNum();
                    this.loadAndon();
                    this.loadPic();
                    this.init_toBar();
                    this.init_toPie();
                });
        },
        loadAndon() {
            this.datetime = moment(this.datetime).format("YYYY-MM-DD");
            this.abnormals = [];
            var params = {
                section: 0,
            };
            this.axios
                .request({
                    url:
                        "dashboard/DashboardAndon/AndonInfoForFactory?date=" +
                        this.datetime,
                    params,
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1 && res.data.data.length > 0) {
                        this.abnormals = res.data.data;
                    } else {
                    }
                });
        },
        loadPic() {
            var params = {
                section: 0,
            };
            axios
                .request({
                    url: "dashboard/DashboardFactory/GetProductLogo",
                    params,
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.pic = this.axios.publicPath + res.data.data.pic;
                        this.productList = res.data.data;
                        this.productName =
                            res.data.data.productName &&
                            res.data.data.productName.length > 15
                                ? res.data.data.productName.substring(0, 15) +
                                  "..."
                                : res.data.data.productName;
                        this.productModel = res.data.data.productModel;
                        this.productPlan = res.data.data.productPlan;
                        // this.productActual=res.data.data.productActual;
                    } else {
                    }
                });
        },
        // 初始化淡入淡出
        init_showPop1() {
            var params = {
                date: moment(this.datetime).format("YYYY-MM-DD"),
            };
            this.axios
                .request({
                    url: "dashboard/DashboardAndon/GetAndonChannelData",
                    params,
                    method: "get",
                })
                .then((res) => {
                    this.channelList = [];
                    if (res.data.ret == 1) {
                        if (res.data.data.length > 0) {
                            this.channelList = res.data.data.slice(0, 5);
                        }
                    }
                });
        },
        // 最新的安灯状态
        andonStatus() {
            var params = {
                section: 0,
                date: moment(this.datetime).format("YYYY-MM-DD"),
            };
            this.axios
                .request({
                    url:
                        "dashboard/DashboardAndon/GetAndonChannelDataForMobile",
                    params,
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        this.expection1 = "";
                        this.expection2 = "";
                        this.expection3 = "";
                        this.expection4 = "";
                        this.expection5 = "";
                        if (res.data.data.length > 0) {
                            var that = this;
                            res.data.data.forEach(function (item, index) {
                                if (item.title === "CH3.3") {
                                    that.expection1 = item.expection;
                                }
                                if (item.title === "CH3.4") {
                                    that.expection2 = item.expection;
                                }
                                if (item.title === "CH3.5") {
                                    that.expection3 = item.expection;
                                }
                                if (item.title === "CH3.6") {
                                    that.expection4 = item.expection;
                                }
                                if (item.title === "CH3.7") {
                                    that.expection5 = item.expection;
                                }
                            });
                        }
                    }
                });
        },
    },
    computed: {
        optionSetting: function () {
            return {
                step: 0.2, // 数值越大速度滚动越快
                // limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                // direction: 0, // 0向下 1向上 2向左 3向右
                // openWatch: true, // 开启数据实时监控刷新dom
                // singleHeight: 740, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                // waitTime: 6000 // 单步运动停止的时间(默认值1000ms)
            };
        },
    },
    // mounted() {
    // if (this.$store.state.user.logo !== '' && this.$store.state.user.logo !== null && this.$store.state.user.logo !== undefined) {
    //   this.imgLogo = this.$store.state.user.logo
    // }
    // if (this.timer) {
    //   clearInterval(this.timer)
    // } else {
    //   // 20分钟刷新时间取设置时间，
    //   this.datetime = moment(this.datetime).format('YYYY-MM-DD')
    //   this.loadProduce()
    //   this.getline()
    //   this.init_showPop1()
    //   this.andonStatus()
    //   this.getColorset()
    //   // 定时20分钟执行一次
    //   this.timer = setInterval(() => {
    //     this.datetime = moment(this.datetime).format('YYYY-MM-DD')
    //     this.loadProduce()
    //     this.getline()
    //     this.init_showPop1()
    //     this.andonStatus()
    //     this.getColorset()
    //   }, 600000)
    // }
    // // 俩小时整个页面刷新一次
    // if (this.timeAll) {
    //   clearInterval(this.timeAll)
    // } else {
    //   // 两小时后刷新,刷回当前时间
    //   this.timeAll = setInterval(() => {
    //     this.datetime = moment(new Date().getTime()).format('YYYY-MM-DD')
    //     location.reload()
    //   }, 1000 * 60 * 60 * 2)
    // }
    // },
    destroyed() {
        clearInterval(this.timer);
        clearInterval(this.timeAll);
    },
};
</script>

<style lang="less" scoped>
@import "./comprehensive.less";
// <<<.bg{
//     background-color: red ;
// }
.seamless-warp {
    width: 100%;
    height: 240px;
    overflow: hidden;
}

.chart_dadar {
    height: 315px;
}
.gaugeForm {
    height: 100px;
}
.pieForm_F {
    height: 160px;
    width: 160px;
}
.barForm_F {
    width: 100%;
    height: 305px;
}
.stackingBar {
    width: 100%;
    height: 386px;
    // margin: 50px auto;
}

.IconSetting {
    display: inline-block;
    position: fixed;
    right: 10px;
    top: -20px;
}
.IconSetting img {
    width: 40px;
    cursor: pointer;
}
.settingmodal {
    .out_row {
        margin-left: 15px;
        line-height: 40px;
        display: block;
        label {
            float: left;
            width: 90px;
        }
        input {
            margin-left: 9px;
            width: 200px;
        }
        select {
            display: inline-block;
            margin-left: 9px;
            width: 200px;
        }
        .up_img {
            position: absolute;
            left: 121px;
            top: 60px;
            opacity: 0;
            width: 200px;
            height: 32px;
        }
    }
}
.class0 {
    background-image: url("../../../static/images/u1049.svg");
    background-repeat: no-repeat;
    // -moz-animation: carton1 5s; /* Firefox */
    // -webkit-animation: carton1 5s; /* Safari 和 Chrome */
    // -o-animation: carton1 5s; /* Opera */
    animation: carton1 20s infinite;
}
.class1 {
    background-image: url("../../../static/images/u1046.svg");
    background-repeat: no-repeat;
    animation: carton2 20s infinite;
}
.class2 {
    background-image: url("../../../static/images/u1032.svg");
    background-repeat: no-repeat;
    animation: carton3 20s infinite;
}
.class3 {
    background-image: url("../../../static/images/u1032.svg");
    background-repeat: no-repeat;
    animation: carton4 20s infinite;
}
.class4 {
    background-image: url("../../../static/images/u1032.svg");
    background-repeat: no-repeat;
    animation: carton5 20s infinite;
}
@keyframes carton1 {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    15% {
        opacity: 1;
    }
    22% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes carton2 {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    35% {
        opacity: 1;
    }
    42% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes carton3 {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    45% {
        opacity: 1;
    }
    55% {
        opacity: 1;
    }
    62% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes carton4 {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 0;
    }
    65% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    82% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes carton5 {
    0% {
        opacity: 0;
    }
    80% {
        opacity: 0;
    }
    85% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
</style>
