
<template>
    <ul class="user_Overview flex onlineBorder ">
        <li class="user_Overview-item position">
            <div class="user_Overview_nums allnum ">
                <p class="headline title">投入品采购数据</p>
            </div>
        </li>
        <div id="fftjChart3"></div>
        <li class="user_Overview-item position">
            <div class="user_Overview_nums online">
                <p class="inside_box box_style">本月</p>
                <p class="inside_box2 box_style">本周</p>
                <p class="inside_box3 box_style">月同比</p>
                <p class="inside_box4 box_style">周同比</p>
                <p class="inside_box5 box_style">今日采购</p>
            </div>
        </li>
    </ul>
</template>

<script>
// 引入基本模板
import * as echarts from "echarts";
export default {
    data() {
        return {
            options: {},
            timer: null,
            pageflag: true,
        };
    },
    filters: {
        numsFilter(msg) {
            return msg || 0;
        },
    },
    mounted() {
        this.fftjChart3 = echarts.init(document.getElementById("fftjChart3"));
        this.drawFftjChart3();
        window.addEventListener('resize', () => {
            this.fftjChart3.resize();
        });
    },
    methods: {
        //轮询
        switper() {
            if (this.timer) {
                return
            }
            let looper = (a) => {
                this.getData()
            };
            this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
        },
        drawFftjChart3() {
            this.fftjChart3.setOption({
                tooltip: {
                    trigger: "item",
                    formatter: function (parms) {
                        return parms.marker + " " + parms.name + "：" + parms.value + "公斤";
                    }
                },
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: ["40%", "60%"],
                        avoidLabelOverlap: false,
                        data: [
                            { value: 100, name: "化肥" },
                            { value: 735, name: "农药" },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 0,
                                shadowOffsetX: 5,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                ],
            })
        },
    },
};
</script>
<style lang='scss' scoped>
#fftjChart3 {
    width: 350px;
    height: 350px;
    position: absolute;
    margin-top: 60px;
    margin-left: 200px;
    z-index: 999;
}

ul {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    margin-left: 20px;
}

.onlineBorder {
    background-image: url("../../assets/img/left_bottom_1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.user_Overview {
    li {
        flex: 1;
        //隐藏点
        list-style-type: none;

        .title {
            align-self: center;
            height: 100%;
            font-size: 16px;
            background-size: cover;
            color: rgb(50, 195, 205);
        }

        .box_style {
            align-self: center;
            height: 100%;
            font-size: 20px;
            background-size: cover;
        }


        //决定定位
        .position {
            position: relative;
        }

        .inside_box {
            position: absolute;
            top: -15px;
            left: 20px;
        }

        .inside_box2 {
            position: absolute;
            top: -15px;
            left: 80px;
        }

        .inside_box3 {
            position: absolute;
            top: 130px;
            left: 1px;
        }

        .inside_box4 {
            position: absolute;
            top: 190px;
            left: 1px;
        }

        .inside_box5 {
            position: absolute;
            top: 250px;
            left: 1px;
        }

        .headline {
            position: absolute;
            top: -15px;
            left: 10px;
        }

        .user_Overview_nums {
            width: 600px;
            height: 72px;
            line-height: 100px;
            font-size: 22px;
            background-size: cover;
            background-position: center center;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                top: 2px;
                left: -28px;
            }

            &.bgdonghua::before {
                animation: rotating 14s linear infinite;
            }
        }

        .allnum {
            &::before {
                background-image: url("../../assets/img/left_bottom_2.png");
                background-repeat: no-repeat;
                background-size: 100%;

            }
        }

        .online {
            background-image: url("../../assets/img/left_bottom_3.png");
            background-repeat: no-repeat;
            background-size: 100%;
            width: 180px;
            height: 160px;
            top: 60px;
            left: -610px;
        }
    }
}
</style>