<template>


    <div class="backbone">
        <div>
            <h3>风场分析完成率</h3>
            <div id="main" style="width: 260px; height: 160px;"></div>

        </div>
        <div>
            <h3>异常设备概览</h3>
            <div class="BOX">
                <div style="display: flex;">
                    <div class="YC01">
                        <strong>4545</strong>
                        <span>异常总数</span>
                    </div>
                    <div class="YC02">
                        <strong>20</strong>
                        <span>本月异常</span>
                    </div>
                </div>

                <div style="display: flex;">
                    <div class="YC02">
                        <strong class="textred">0</strong>
                        <span>未处理异常</span>
                    </div>
                    <div class="YC02">
                        <strong class="texyellow">20</strong>
                        <span>异常设备数</span>
                    </div>
                    <div class="YC03">

                    </div>

                </div>
            </div>
        </div>
        <div>
            <h3>异常数据信息</h3>
            <div>
                <el-table v-loading="shujuloading" :data="tableData" :max-height="150" ref="shujuscroll_Table" stripe
                    @mouseenter.native="shujuautoScroll(true)" @mouseleave.native="shujuautoScroll(false)"
                    class="Tabtab">
                    <el-table-column prop="name" label="姓名">
                    </el-table-column>
                    <el-table-column prop="date" label="日期">
                    </el-table-column>
                    <el-table-column prop="date" label="记录">
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div>
            <h3>近期操作记录</h3>
            <div>
                <el-table v-loading="loading" :data="tableData" :max-height="150" ref="scroll_Table" stripe
                    @mouseenter.native="autoScroll(true)" @mouseleave.native="autoScroll(false)" class="Tabtab">
                    <el-table-column prop="name" label="姓名">
                    </el-table-column>
                    <el-table-column prop="date" label="日期">
                    </el-table-column>
                    <el-table-column prop="date" label="记录">
                    </el-table-column>
                </el-table>
            </div>
        </div>

    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {

            myChart: null,
            loading: false,
            shujuloading: false,
            tableData: [{ name: '王小虎', }, { name: '王小虎', }, { name: '王小虎', }, { name: '王小虎', }, { name: '王小虎', }, { name: '王小虎', }],
            scrolltimer: '', // 自动滚动的定时任务
        }
    },
    mounted() {
        this.autoScroll()
        this.shujuautoScroll()
        this.initChart();

    },
    beforeDestroy() {
        this.autoScroll(true)
        this.shujuautoScroll(true)
    },


    methods: {
        autoScroll(stop) {
            const table = this.$refs.scroll_Table
            // 拿到表格中承载数据的div元素
            const divData = table.$refs.bodyWrapper
            // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
            if (stop) {
                //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
                window.clearInterval(this.scrolltimer)
            } else {
                this.scrolltimer = window.setInterval(() => {
                    // 元素自增距离顶部1像素
                    divData.scrollTop += 1
                    // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
                    if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
                        // 重置table距离顶部距离
                        divData.scrollTop = 0
                        // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
                        // divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
                    }
                }, 150) // 滚动速度

            }
        },
        shujuautoScroll(stop) {
            const table = this.$refs.shujuscroll_Table
            // 拿到表格中承载数据的div元素
            const divData = table.$refs.bodyWrapper
            // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
            if (stop) {
                //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
                window.clearInterval(this.scrolltimer)
            } else {
                this.scrolltimer = window.setInterval(() => {
                    // 元素自增距离顶部1像素
                    divData.scrollTop += 1
                    // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
                    if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
                        // 重置table距离顶部距离
                        divData.scrollTop = 0
                        // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
                        // divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
                    }
                }, 150) // 滚动速度

            }
        },

        initChart() {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        var percent = params.percent.toFixed(2) + '%';
                        return `${params.name}: ${params.value} (${percent})`;
                    }
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    top: '30%' // 将图例向下移动一些
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['40%', '80%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        center: ['60%', '50%'], // 将饼图往右移动一些
                        data: [
                            { value: 15, name: '已完成', itemStyle: { color: '#7ECF51' } },
                            { value: 50, name: '进行中', itemStyle: { color: '#EECB5F' } },
                            { value: 30, name: '未开始', itemStyle: { color: '#E16757' } },
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);
        }



    }
};
</script>


<style lang="scss" scoped>
.backbone {
    width: 300px;
    color: #FFF;
    background: #008080;
    height: 95%;
    border-radius: 5px;
    padding: 20px;

}

.BOX {
    background: #004F5F;
    display: flex;


    padding-left: 10px;
    flex-wrap: wrap;
    padding-bottom: 15px;

}

.YC01 {
    width: 154px;
    height: 60px;
    background-image: url('../../../../assets/001.png');
    background-size: 154px 60px;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 15px;
    margin-top: 15px;
    text-align: center;

    strong {
        display: block;
        font-size: 26px;
        color: #4BFFFF;
    }

    span {
        display: block;
        font-size: 12px;

    }
}

.YC02 {
    width: 70px;
    height: 60px;
    background-image: url('../../../../assets/002.png');
    background-size: 70px 60px;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 15px;
    margin-top: 15px;
    text-align: center;

    .textred {
        color: #D9001B;
    }

    .texyellow {
        color: #FACD91;
    }

    strong {
        display: block;
        font-size: 26px;
        color: #4BFFFF;
    }

    span {
        display: block;
        font-size: 12px;

    }
}

.YC03 {
    width: 70px;
    height: 60px;
}

.Tabtab {
    font-size: 12px;
}

::v-deep.el-table__cell {
    padding: 2px 0 !important
}

::v-deep.el-table .el-table__cell {
    padding: 2px 0 !important
}


::v-deep.el-table--scrollable-y .el-table__body-wrapper {
    overflow-y: clip !important
}
</style>