<template>
    <div v-loading="loading" element-loading-text="数据加载中">
        <timePicker
            @querfromdata="querfromdata"
            :treenode="treenode"
            :interval="interval"
            :name="name"
            :dataTree="dataTree"
        ></timePicker>
        <el-tooltip class="item" effect="dark" content="稳态合格率统计算法" placement="top">
            <el-button
                @click="algorithm('稳态合格率')"
                style="position: absolute; top: 0%; margin-left: -54.4%"
                size="mini"
                type="primary"
                circle
                icon="el-icon-warning-outline"
            ></el-button>
        </el-tooltip>
        <!-- </el-col> -->
        <el-row :gutter="20">
            <el-col :span="24">
                <div ref="sty" id="steadyqualification" style="height: calc(100vh - 190px)"></div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getechartsheight } from '../../assets/commjs/common'
import api from '@/api/harmonic/onlineData'
import yan from '../../assets/commjs/color'
import TimePicker from '../components/TimePicker/index'
import echarts from 'echarts'
function fontSize(res) {
    let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
    if (!clientWidth) return
    let fontSize = 100 * (clientWidth / 1920)
    return res * fontSize
}
export default {
    name: 'wtzbhgl',
    components: {
        TimePicker
    },
    props: {
        treenode: {
            type: Object,
            default: undefined
        },
        dataTree: {
            type: Array,
            default: undefined
        },
        name: {
            type: String,
            default: undefined
        },
        treeid: {
            type: String,
            default: undefined
        },
        view: {
            type: Boolean,
            default: undefined
        }
    },
    data() {
        return {
            wt: true,
            loading: false,
            panduan: false,
            echartsheight: undefined,
            echartswidth: undefined,
            device: 1,
            interval: 3,
            lineid: '',
            timehuanbiValue: [],
            timehbValue: [],
            formData: {
                id: this.treeid,
                periodBeginTime: '',
                periodEndTime: '',
                searchBeginTime: '',
                searchEndTime: ''
            },

            ping: '',
            time: '',
            thname: '',
            year1: undefined,
            year2: undefined,
            yData: [],
            yData1: [],
            vh: null
        }
    },
    watch: {
        treeid(a) {
            if (a) {
                //  console.log(a);
                this.formData.id = a
            }
        }
    },
    created() {
        //this.formData.id = window.sessionStorage.getItem('lineId');
        this.device = window.devicePixelRatio
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.formData.id = window.sessionStorage.getItem('lineId')
        this.$nextTick(() => {
            this.steadyqualification()
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 180 + 'px'
        },
        // 算法
        algorithm(name) {
            let pathInfo = this.$router.resolve({
                path: '/algorithm/algorithm',
                query: {
                    name: name
                }
            })
            window.open(pathInfo.href, '算法帮助')
        },
        //时间格式转化
        dateFormat(dateData1, dateData2) {
            var timearr = []
            var date = new Date(dateData1)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? '0' + m : m
            var d = date.getDate()
            d = d < 10 ? '0' + d : d
            var h = date.getHours()
            h = h < 10 ? '0' + h : h
            var f = date.getMinutes()
            f = f < 10 ? '0' + f : f
            var s = date.getSeconds()
            s = s < 10 ? '0' + s : s
            this.formData.searchBeginTime = y + '-' + m + '-' + d
            timearr.push(this.formData.startTime)
            var date = new Date(dateData2)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? '0' + m : m
            var d = date.getDate()
            d = d < 10 ? '0' + d : d
            var h = date.getHours()
            h = h < 10 ? '0' + h : h
            var f = date.getMinutes()
            f = f < 10 ? '0' + f : f
            var s = date.getSeconds()
            s = s < 10 ? '0' + s : s
            this.formData.searchEndTime = y + '-' + m + '-' + d
            timearr.push(this.formData.endTime)
            return timearr
        },
        //2次组件触发事件

        querfromdata(data, timehbValue, interval, tb) {
            this.year1 = tb
            // this.formData.id = window.sessionStorage.getItem('lineId');
            this.interval = interval
            this.loading = true
            setTimeout(() => {
                if (timehbValue != '') {
                    this.formData.searchBeginTime = data[0]
                    this.formData.searchEndTime = data[1]
                    this.formData.periodBeginTime = timehbValue[0]
                    this.formData.periodEndTime = timehbValue[1]
                    this.formData.id = this.treeid
                    this.time = data[0] + '至' + data[1]
                    this.ping = timehbValue[0] + '至' + timehbValue[1]
                    this.yData = []
                    this.yData1 = []

                    // console.log('======',year)
                    api.getSteadyData(this.formData).then(res => {
                        if (res.code == 'A0000') {
                            var data = res.data.steadyInfoList
                            var data1 = res.data.steadyInfoData
                            var arr = [],
                                arr2 = []
                            for (var i = 0; i < data.length; i++) {
                                if (data[i] == 3.1415) {
                                    data[i] = 1
                                    arr.push(data[i])
                                } else if (data[i] == 3.14159) {
                                    data[i] = 3
                                    arr.push(data[i])
                                } else {
                                    arr.push(data[i])
                                }
                            }
                            this.yData = arr
                            for (var i = 0; i < data1.length; i++) {
                                if (data1[i] == 3.1415) {
                                    data1[i] = 1
                                    arr2.push(data1[i])
                                } else if (data1[i] == 3.14159) {
                                    data1[i] = 3
                                    arr2.push(data1[i])
                                } else {
                                    arr2.push(data1[i])
                                }
                            }
                            this.yData1 = arr2
                            this.$nextTick(() => {
                                this.steadyqualification()
                            })
                        }
                    })
                }
                if (timehbValue == '') {
                    this.time = data[0] + '至' + data[1]
                    this.formData.searchBeginTime = data[0]
                    this.formData.searchEndTime = data[1]
                    this.formData.id = this.treeid

                    // console.log("+++++",year2)
                    this.yData = []
                    this.yData1 = []
                    api.getSteadyData(this.formData).then(res => {
                        var arr = []
                        if (res.code == 'A0000') {
                            var data = res.data.steadyInfoList
                            for (var i = 0; i < data.length; i++) {
                                if (data[i] == 3.1415) {
                                    data[i] = 1
                                    arr.push(data[i])
                                } else if (data[i] == 3.14159) {
                                    data[i] = 3
                                    arr.push(data[i])
                                } else {
                                    arr.push(data[i])
                                }
                            }
                            this.yData = arr
                            this.yData1 = []
                            this.$nextTick(() => {
                                this.steadyqualification()
                            })
                        }
                    })
                }
            }, 800)
        },

        //电能质量图表
        steadyqualification() {
            this.loading = true
            //debugger
            if (this.year1 == 'tb') {
                this.thname = '同比'
            } else if (this.year1 == 'hb') {
                this.thname = '环比'
            } else if (this.year1 == 'bb') {
                this.thname = ''
            }
            const echarts = require('echarts')
            let domID1 = document.getElementById('steadyqualification')
            setTimeout(() => {
                domID1.style.width = window.sessionStorage.getItem('appwidth') - 150 + 'px'
            }, 0)
            let myChartes = echarts.init(domID1)
            myChartes.clear()

            var option = {
                title: {
                    text: '稳态指标合格率' + this.thname,
                    x: 'center',
                    y: '0%',
                    textStyle: {
                        color: '#000',
                        fontSize: '16'
                    },
                    subtextStyle: {
                        color: '#90979c',
                        fontSize: '12'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        var msg = ''
                        for (let i in params) {
                            if (params[i].data > 0 && params[i].data <= 1) {
                                msg += '<br/>' + params[i].seriesName
                                msg += '<br/>' + params[i].name + ':暂无监测点'
                            } else if (params[i].data > 1 && params[i].data <= 3) {
                                msg += '<br/>' + params[i].seriesName
                                msg += '<br/>' + params[i].name + ':暂无数据'
                            } else {
                                msg += '<br>' + params[i].seriesName
                                msg += '<br/>' + params[i].name + ':' + params[i].data + '%'
                            }
                        }
                        return msg
                    }
                },
                grid: {
                    top: '10%',
                    left: '0%',
                    right: '8%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    name: '指标类型',
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: '#000',
                            width: 1
                        },
                        symbol: ['none', 'arrow']
                    },
                    axisLabel: {
                        textStyle: {
                            fontFamily: 'dinproRegular',
                            color: '#000'
                        },
                        rotate: 0
                    },
                    data: [
                        '频率偏差',
                        '闪变',
                        '三相电压不平衡',
                        '谐波电压',
                        '谐波电流',
                        '电压偏差',
                        '负序电流',
                        '间谐波电压含有率'
                    ]
                },
                toolbox: {
                    feature: {
                        //restore: {},
                        //saveAsImage: {},
                    }
                },
                yAxis: [
                    {
                        name: '单位:%',
                        min: 0,
                        max: 100,
                        nameTextStyle: {
                            color: '#000',
                            fontSize: fontSize(0.12)
                            // left:'0%'
                        },
                        position: 'left',
                        splitLine: {
                            show: false
                        }
                    },
                    {
                        position: 'left',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#000'
                            },
                            symbol: ['none', 'arrow']
                        },
                        splitLine: {
                            //分割线配置
                            lineStyle: {
                                color: '#AAAAAA56'
                            }
                        }
                    }
                ],

                series: [
                    {
                        name: this.time,
                        type: 'bar',
                        // stack: '余额',
                        barMaxWidth: 40,
                        label: {
                            show: true,
                            position: 'top',
                            distance: 2,
                            color: '#fff',
                            fontWeight: 'bolder',
                            fontSize: fontSize(0.1)
                        },
                        data: this.yData,
                        markLine: {
                            silent: false,
                            symbol: 'circle',
                            data: [
                                {
                                    name: '合格率≥90%',
                                    yAxis: 100,
                                    lineStyle: {
                                        color: yan.ColorObject.qualifiedRate1
                                    },
                                    label: {
                                        color: yan.ColorObject.qualifiedRate1, // 文字颜色
                                        padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
                                        show: true,
                                        formatter: function (params) {
                                            // alert(params)
                                            var tips = ''
                                            tips += '合格率≥90%'

                                            return tips
                                        }
                                    }
                                },
                                {
                                    name: '60%≤合格率<90%',
                                    yAxis: 90,
                                    lineStyle: {
                                        color: yan.ColorObject.qualifiedRate2
                                    },
                                    label: {
                                        color: yan.ColorObject.qualifiedRate2, // 文字颜色
                                        padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
                                        show: true,
                                        formatter: function (params) {
                                            // alert(params)
                                            var tips = ''
                                            tips += '60%≤合格率<90%'

                                            return tips
                                        }
                                    }
                                },
                                {
                                    name: '合格率<60%',
                                    yAxis: 60,
                                    lineStyle: {
                                        color: yan.ColorObject.qualifiedRate3
                                    },
                                    label: {
                                        color: yan.ColorObject.qualifiedRate3, // 文字颜色
                                        padding: [2, 2, 5, 0], // 可用padding调整图片内文字距离
                                        show: true,
                                        formatter: function (params) {
                                            // alert(params)
                                            var tips = ''
                                            tips += '合格率<60%'

                                            return tips
                                        }
                                    }
                                }
                            ]
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    if (params.value >= 90 && params.value <= 100) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.qualifiedRate1
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value >= 60 && params.value <= 90) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.qualifiedRate2
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value <= 60 && params.value >= 10) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.qualifiedRate3
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value <= 5 && params.value > 0) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#ccc'
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value <= 8 && params.value > 5) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#ccc'
                                                }
                                            ],
                                            false
                                        )
                                    }
                                }
                            }
                        }
                    },
                    {
                        name: this.ping,
                        type: 'bar',
                        barMaxWidth: 40,
                        label: {
                            show: true,
                            position: 'top',
                            distance: 2,
                            color: '#fff',
                            fontWeight: 'bolder',
                            fontSize: fontSize(0.1)
                        },
                        data: this.yData1,

                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    if (params.value >= 90 && params.value <= 100) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.qualifiedRate1
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value >= 60 && params.value <= 90) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.qualifiedRate2
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value <= 60 && params.value >= 10) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.qualifiedRate3
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value <= 5 && params.value > 0) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#ccc'
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value <= 8 && params.value > 5) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#ccc'
                                                }
                                            ],
                                            false
                                        )
                                    }
                                }
                            }
                        }
                    }
                ]
            }
            myChartes.setOption(option)
            window.echartsArr.push(myChartes)
            this.loading = false
            let _this = this
            _this.$erd.listenTo(_this.$refs.sty, element => {
                _this.$nextTick(() => {
                    myChartes.resize()
                })
            })
            window.onresize = function () {
                myChartes.resize()
            }
        }
    }
}
</script>
<style lang="less" scoped>
.cfd {
    display: inline-block;
    // margin-bottom: 10px;
    width: 100%;
    margin-top: 0%;
    position: relative;
    z-index: 100000;
}
.cf {
    display: inline-block;
    //margin-bottom: 10px;
    width: 100%;
    margin-top: 0%;
    position: relative;
    z-index: 100000;
}
</style>
