<template>
    <div v-loading="loading" element-loading-text="数据加载中">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
                <timePicker
                    @querfromdata="querfromdata"
                    :interval="interval"
                    :treenode="treenode"
                    :dataTree="dataTree"
                ></timePicker>
            </el-form-item>
        </el-form>
        <el-row :gutter="20" :style="'overflow:hidden;height:' + vh" id="runfenx">
            <el-col :span="12" id="ztcshi">
                <div ref="run" id="runstatus" :style="`width: 100%;`"></div>
            </el-col>
            <el-col :span="12" id="datacshi">
                <div style="position: absolute; right: 10px; top: 2px; font-weight: bold; z-index: 200000">
                    <span style="color: #000; font-weight: bold">&nbsp&nbsp 左柱(在线率) &nbsp&nbsp</span>
                    <span style="color: #000; font-weight: bold">
                        &nbsp&nbsp 右柱(完整性) &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp
                        &nbsp&nbsp&nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp
                    </span>
                    <el-tag
                        style="
                            background: #cc0000;
                            width: 30px;
                            height: 15px;
                            border: 1px solid #cc0000;
                            margin-top: 2px;
                        "
                    ></el-tag>
                    <span style="color: #cc0000; font-weight: 400">&nbsp&nbspX<60% &nbsp&nbsp</span>
                    <el-tag
                        size="mini"
                        style="
                            background: #ffcc33;
                            width: 30px;
                            height: 15px;
                            border: 1px solid #ffcc33;
                            margin-top: 2px;
                        "
                    ></el-tag>
                    <span style="color: #ffcc33; font-weight: 400">&nbsp&nbsp60%≤X<90% &nbsp&nbsp</span>
                    <el-tag
                        style="
                            background: #339966;
                            width: 30px;
                            height: 15px;
                            border: 1px solid #339966;
                            margin-top: 2px;
                        "
                    ></el-tag>
                    <span style="color: #339966; font-weight: 400; margin-right: 10px">&nbsp&nbspX≥90%</span>
                    <el-button
                        style="float: right; margin-top: -8px"
                        type="text"
                        icon="el-icon-download"
                        title="生成图片"
                        @click="download"
                    >
                        下载
                    </el-button>
                </div>
                <div ref="datainter" id="dataintegrity" :style="`width: 100%;`"></div>
            </el-col>
        </el-row>
        <!-- <el-button><router-link :to="{path: '/harmonic-boot/algorithm', query: {name: 'sjwzx'}}">算法</router-link></el-button> -->
    </div>
</template>
<script>
import { getechartsheight } from '../../assets/commjs/common'
import yan from '@/assets/commjs/color'
import api from '@/api/harmonic/onlineData'
import TimePicker from '../components/TimePicker/index'
import echarts, { number } from 'echarts'
import el from '@/components/HighLevelSearchForm/components/transfer/locale/lang/el'
export default {
    name: 'yxzt',
    components: {
        TimePicker
    },
    data() {
        return {
            formInline: {},
            vh: null,
            vth: '',
            zoom: '',
            loading: false,
            echartsheight: undefined,
            node: undefined,
            device: 1,
            interval: 3,
            time: [],
            xdata: [],
            ydata: [],
            ydata1: [],
            ydata2: [],
            myChartes1: '',
            myChartes2: ''
        }
    },

    props: {
        treenode: {
            type: Object,
            default: undefined
        },
        dataTree: {
            type: Array,
            default: undefined
        },
        treeid: {
            type: String,
            default: undefined
        },
        view: {
            type: Boolean,
            default: undefined
        }
    },
    watch: {},
    created() {},
    mounted() {
        this.resizeEchartZ()
        this.resizeEchartD()
        this.zoom = 1 / document.body.style.zoom
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.$nextTick(() => {
            this.runstatusEcharts()
            this.dataintegrity()
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            if (this.myChartes1 !== '') {
                this.myChartes1.resize()
            }
            if (this.myChartes2 !== '') {
                this.myChartes2.resize()
            }
            this.vh = window.sessionStorage.getItem('appheight') - 125 + 'px'
        },
        resizeEchartZ() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('ztcshi'), element => {
                // let  domeId=document.getElementById("ceshi")
                let domeId2 = document.getElementById('runstatus')
                domeId2.style.width = document.getElementById('ztcshi').offsetWidth - 0 + 'px'
                //this.$nextTick(() => {
                if (this.myChartes1 !== '') {
                    this.myChartes1.resize()
                }

                // });
            })
        },
        resizeEchartD() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('datacshi'), element => {
                //let  domeId=document.getElementById("ceshi2")
                let domeId2 = document.getElementById('dataintegrity')
                domeId2.style.width = document.getElementById('datacshi').offsetWidth - 0 + 'px'
                // this.$nextTick(() => {
                if (this.myChartes2 !== '') {
                    this.myChartes2.resize()
                }
                // });
            })
        },
        download() {
            // 转换成canvas
            html2canvas(document.getElementById('runfenx'), {
                background: '#fff',
                scale: 1
            }).then(function (canvas) {
                // 创建a标签，实现下载
                var creatIMg = document.createElement('a')
                creatIMg.download = '监测点运行状态.png' // 设置下载的文件名，
                creatIMg.href = canvas.toDataURL() // 下载url
                creatIMg.click()
                creatIMg.remove() // 下载之后把创建的元素删除
            })
        },
        //日期组件触发事件
        querfromdata(data, timehbValue, interval) {
            this.interval = interval
            this.loading = true
            let arr = []
            if (timehbValue == '') {
                this.timeValue = data
                let startTime = data[0]
                let year = parseInt(startTime.substring(0, 4))
                let month = parseInt(startTime.substring(5, 7))

                if (interval == 1) {
                    let time = year + '年'
                    arr = []
                    arr.push(time)
                } else if (interval == 2) {
                    let month = parseInt(startTime.substring(5, 7))
                    let time = ''
                    if (month == 1) {
                        time = year + '年1季度'
                        arr = []
                        arr.push(time)
                    }
                    if (month == 4) {
                        time = year + '年2季度'
                        arr = []
                        arr.push(time)
                    }
                    if (month == 7) {
                        time = year + '年3季度'
                        arr = []
                        arr.push(time)
                    }
                    if (month == 10) {
                        time = year + '年4季度'
                        arr = []
                        arr.push(time)
                    }
                } else if (interval == 3) {
                    let month = parseInt(startTime.substring(5, 7))
                    let time = year + '年' + month + '月'
                    arr = []
                    arr.push(time)
                } else if (interval == 4 || interval == 5) {
                    arr = []
                    arr.push(data[0] + '至' + data[1])
                }

                //arr.push(data[0] + "至" + data[1]);
                this.time = arr

                var data = {
                    id: this.treeid,
                    searchBeginTime: this.timeValue[0],
                    searchEndTime: this.timeValue[1]
                }
                api.getRunInfoData(data).then(res => {
                    if (res.code == 'A0000') {
                        let ydata1 = res.data.onlineRateData
                        let ydata2 = res.data.integrityData
                        if (ydata1[0] == 0) {
                            ydata1[0] = 1
                        }
                        if (ydata2[0] == 0) {
                            ydata2[0] = 1
                        }
                        this.ydata1 = ydata1

                        this.ydata2 = ydata2
                        this.$nextTick(() => {
                            this.dataintegrity()
                        })
                    }
                })
                api.getComFlagInfoData(data).then(res => {
                    if (res.code === 'A0000') {
                        let time = res.data.updateTime
                        for (var i = 0; i < time.length; i++) {
                            if (i != 0) {
                                i
                                time[i] = time[i].slice(11)
                            } else if (i == 0) {
                                let date = time[i].slice(11)
                                let t = time[i].slice(0, 10)
                                time[i] = '(' + date + ')' + '\n' + t
                            }
                        }
                        this.xdata = time
                        this.ydata = res.data.type

                        this.$nextTick(() => {
                            this.runstatusEcharts()
                        })
                    }
                })
                //      this.$nextTick(()=> {

                //       this.dataintegrity()
                //    })
            } else {
                this.loading = true
                this.timeValue = data
                this.timehbValue = timehbValue

                let t1 = data[0]
                let year1 = parseInt(t1.substring(0, 4))
                let month1 = parseInt(t1.substring(5, 7))

                if (interval == 1) {
                    let time = year1 + '年'
                    arr = []
                    arr.push(time)
                } else if (interval == 2) {
                    //let month = parseInt(t1.substring(5, 7));
                    let time = ''
                    if (month1 == 1) {
                        time = year1 + '年1季度'
                        arr = []
                        arr.push(time)
                    }
                    if (month1 == 4) {
                        time = year1 + '年2季度'
                        arr = []
                        arr.push(time)
                    }
                    if (month1 == 7) {
                        time = year1 + '年3季度'
                        arr = []
                        arr.push(time)
                    }
                    if (month1 == 10) {
                        time = year1 + '年4季度'
                        arr = []
                        arr.push(time)
                    }
                } else if (interval == 3) {
                    //let month1 = parseInt(t1.substring(5, 7));
                    let time = year1 + '年' + month1 + '月'
                    arr = []
                    arr.push(time)
                } else if (interval == 4 || interval == 5) {
                    arr = []
                    arr.push(data[0] + '至' + data[1])
                }

                //arr.push(data[0] + "至" + data[1]);

                let t2 = timehbValue[0]
                let year2 = parseInt(t2.substring(0, 4))
                let month2 = parseInt(t2.substring(5, 7))
                if (interval == 1) {
                    let time = year2 + '年'
                    //arr =[]
                    arr.push(time)
                } else if (interval == 2) {
                    //let month = parseInt(t1.substring(5, 7));
                    let time = ''
                    if (month2 == 1) {
                        time = year2 + '年1季度'
                        // arr =[]
                        arr.push(time)
                    }
                    if (month2 == 4) {
                        time = year2 + '年2季度'
                        // arr =[]
                        arr.push(time)
                    }
                    if (month2 == 7) {
                        time = year2 + '年3季度'
                        //arr =[]
                        arr.push(time)
                    }
                    if (month2 == 10) {
                        time = year2 + '年4季度'
                        //arr =[]
                        arr.push(time)
                    }
                } else if (interval == 3) {
                    // let month1 = parseInt(t1.substring(5, 7));
                    let time = year2 + '年' + month2 + '月'
                    // arr =[]
                    arr.push(time)
                } else if (interval == 4 || interval == 5) {
                    // arr=[]
                    arr.push(timehbValue[0] + '至' + timehbValue[1])
                }

                // arr.push(timehbValue[0] + "至" + timehbValue[1]);
                this.time = arr

                var data = {
                    id: this.treeid,
                    periodBeginTime: this.timehbValue[0],
                    periodEndTime: this.timehbValue[1],
                    searchBeginTime: this.timeValue[0],
                    searchEndTime: this.timeValue[1]
                }
                var data1 = {
                    id: this.treeid,
                    searchBeginTime: this.timeValue[0],
                    searchEndTime: this.timeValue[1]
                }
                api.getComFlagInfoData(data1).then(res => {
                    this.loading = true
                    if (res.code === 'A0000') {
                        let time = res.data.updateTime
                        for (var i = 0; i < time.length; i++) {
                            if (i != 0) {
                                i
                                time[i] = time[i].slice(11)
                            } else if (i == 0) {
                                let date = time[i].slice(11)
                                let t = time[i].slice(0, 10)
                                time[i] = '(' + date + ')' + '\n' + t
                            }
                        }
                        this.xdata = time

                        this.ydata = res.data.type

                        this.$nextTick(() => {
                            this.runstatusEcharts()
                        })
                    }
                })
                api.getRunInfoData(data).then(res => {
                    this.loading = true
                    if (res.code == 'A0000') {
                        let ydata1 = res.data.onlineRateData
                        let ydata2 = res.data.integrityData
                        if (ydata1[0] == 0) {
                            ydata1[0] = 1
                        }
                        if (ydata1[1] == 0) {
                            ydata1[1] = 1
                        }
                        if (ydata2[0] == 0) {
                            ydata2[0] = 1
                        }
                        if (ydata2[1] == 0) {
                            ydata2[1] = 1
                        }
                        this.ydata1 = ydata1

                        this.ydata2 = ydata2
                        this.$nextTick(() => {
                            this.dataintegrity()
                        })
                    }
                })
            }
            //alert('父组件条件查询触发方法'+ this.timeValue)
        },

        //运行状态图表
        runstatusEcharts() {
            const echarts = require('echarts')
            let domID1 = document.getElementById('runstatus')
            setTimeout(() => {
                domID1.style.width = document.getElementById('ztcshi').offsetWidth + 10 + 'px'
                domID1.style.height = window.sessionStorage.getItem('appheight') - 130 + 'px'
            }, 0)
            let myChartes1 = echarts.init(domID1)
            this.myChartes1 = myChartes1
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            myChartes1.clear()
            myChartes1.resize()
            var option = {
                // title: {
                //     text: '运行状态'
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    formatter: function (params) {
                        var res = params[0].name + '<br/>终端运行状态为：'
                        var texts = ''
                        if (params[0].value === 2 || params[0].value === '2') {
                            texts = '退出'
                        } else if (params[0].value === 0 || params[0].value === '0') {
                            texts = '中断'
                        } else if (params[0].value === 1 || params[0].value === '1') {
                            texts = '正常'
                        }
                        res = res + texts
                        return res
                    }
                },
                legend: {
                    data: ['运行状态'],
                    right: '10px',
                    textStyle: {
                        color: echartsColor.WordColor,
                        fontSize: '12'
                    }
                },
                grid: yan.EchartObject.grid7,
                dataZoom: yan.EchartObject.dataZoom,
                // toolbox: {
                //   right: 80,
                //   feature: {
                //     //restore: {},
                //     saveAsImage: {},
                //   },
                // },
                xAxis: {
                    name: '时间',
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    boundaryGap: false,
                    type: 'category',
                    data: this.xdata,
                    axisLine: {
                        show: true,
                        // symbol: ["none", "arrow"],
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisTick: {
                        show: true,
                        alignWithLabel: true
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    }
                },
                yAxis: {
                    name: '状态',
                    type: 'value',
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    axisLine: {
                        show: true,
                        // symbol: ["none", "arrow"],
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: echartsColor.WordColor
                        },
                        // 这里重新定义就可以
                        formatter: function (value, index) {
                            var texts = []
                            if (value === 2) {
                                texts.push('退出')
                            } else if (value === 0) {
                                texts.push('中断')
                            } else if (value === 1) {
                                texts.push('正常')
                            }
                            return texts
                        }
                    }
                },
                series: [
                    {
                        name: '运行状态',
                        type: 'line',
                        step: 'end',
                        data: this.ydata
                    }
                ]
            }
            myChartes1.setOption(option)
            window.echartsArr.push(myChartes1)
            this.loading = false
            let _this = this
            _this.$erd.listenTo(_this.$refs.run, element => {
                _this.$nextTick(() => {
                    domID1.style.width = document.getElementById('ztcshi').offsetWidth + 10 + 'px'
                    myChartes1.resize()
                })
            })
            window.onresize = function () {
                myChartes1.resize()
            }
        },
        //数据完整性图表
        dataintegrity() {
            const echarts = require('echarts')
            let domID1 = document.getElementById('dataintegrity')
            setTimeout(() => {
                domID1.style.width = document.getElementById('datacshi').offsetWidth - 10 + 'px'
                domID1.style.height = window.sessionStorage.getItem('appheight') - 130 + 'px'
            }, 0)
            let myChartes2 = echarts.init(domID1)
            this.myChartes2 = myChartes2
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            myChartes2.clear()
            myChartes2.resize()
            var option = {
                title: {
                    // text: "同比",
                    x: '0%',
                    y: '2%',
                    //subtext: "单位(%)",
                    textStyle: {
                        color: echartsColor.WordColor,
                        fontSize: '12'
                    },
                    subtextStyle: {
                        color: echartsColor.WordColor,
                        fontSize: '12'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    formatter: function (params) {
                        //console.log(params)
                        var msg = ''
                        msg += params[0].name + '<br/>'
                        for (let i in params) {
                            if (params[i].data == 1) {
                                msg += params[i].seriesName + ':暂无数据<br/>'
                            } else {
                                // msg+='<br>'+params[i].name+'<br/>'
                                msg += params[i].seriesName + ':' + params[i].data.toFixed(2) + '<br/>'
                            }
                        }
                        return msg
                    }
                },
                grid: yan.EchartObject.grid77,
                // legend: {
                //  // data: ["在线率", "数据完整性"],
                //   left: "50px",
                //   textStyle: {
                //     color: echartsColor.WordColor,
                //   },
                // },
                // toolbox: {
                //   right: "3%",
                //   feature: {
                //     //restore: {},
                //     saveAsImage: {},
                //   },
                // },
                xAxis: {
                    name: '时间',
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    type: 'category',
                    data: this.time,
                    axisLine: {
                        symbol: ['none', 'arrow'],
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor,
                        // interval: 0,
                        // rotate: 40,
                        textStyle: {
                            fontFamily: 'Microsoft YaHei'
                        }
                    }
                },

                yAxis: {
                    name: yan.EchartObject.nuit1,
                    type: 'value',
                    max: '100',
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    axisLine: {
                        show: true,
                        symbol: ['none', 'arrow'],
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                series: [
                    {
                        name: '在线率',
                        type: 'bar',
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        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 > 0 && params.value !== 1) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.qualifiedRate3
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value == 1) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#ccc'
                                                }
                                            ],
                                            false
                                        )
                                    }
                                }
                            }
                        },
                        data: this.ydata1
                    },
                    {
                        name: '数据完整性',
                        type: 'bar',
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        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 > 0 && params.value !== 1) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.qualifiedRate3
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value == 1) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#ccc'
                                                }
                                            ],
                                            false
                                        )
                                    }
                                }
                            }
                        },
                        data: this.ydata2,
                        markLine: {
                            silent: false,
                            symbol: 'circle',
                            data: [
                                {
                                    name: '',
                                    yAxis: 100,
                                    lineStyle: {
                                        color: yan.ColorObject.onLienRate1
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: yan.ColorObject.onLienRate1
                                        }
                                    }
                                },
                                {
                                    name: '',
                                    yAxis: 90,
                                    lineStyle: {
                                        color: yan.ColorObject.onLienRate2
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: yan.ColorObject.onLienRate2
                                        }
                                    }
                                },
                                {
                                    name: '',
                                    yAxis: 60,
                                    lineStyle: {
                                        color: yan.ColorObject.onLienRate3
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: yan.ColorObject.onLienRate3
                                        }
                                    }
                                }
                            ]
                        }
                    }
                ]
            }
            myChartes2.setOption(option)
            window.echartsArr.push(myChartes2)
            this.loading = false
            let _this = this

            _this.$erd.listenTo(_this.$refs.datainter, element => {
                _this.$nextTick(() => {
                    ;(domID1.style.width = document.getElementById('datacshi').offsetWidth - 10 + 'px'),
                        myChartes2.resize()
                })
            })
            window.onresize = function () {
                myChartes2.resize()
            }
            // setInterval(() => {
            //myChartes.resize()
            //}, 1000);
        }
    }
}
</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>
