<template>
    <div class="environmentalProtection">
        <!--  上面布局  -->
        <div class="flex">
            <!-- 左边echart -->
            <div class="left">
                <div class="wrapper">
                    <div class="chart-tab-t">
                        <div class="chart-tab-title">化学需氧量</div>
                    </div>
                    <div class="wrapper-content">
                        <div ref="chartLeft1" style="width: 100%; height: 100%"></div>
                    </div>
                </div>
                <div class="wrapper">
                    <div class="chart-tab-t">
                        <div class="chart-tab-title">氨氮</div>
                    </div>
                    <div class="wrapper-content">
                        <div ref="chartLeft2" style="width: 100%; height: 100%"></div>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="line1">
                    <div class="today">{{date}}</div>
                    <div class="test">环保监测</div>
                </div>
                <div class="line2">
                    <div class="state">技术说明</div>
                    <div class="text">
                        以“超滤、纳滤、反渗透”工艺为核心，出水水质可稳定达到《畜禽养殖业污染物排放标准》（2014二次征求意见稿），具有处理效率高、运行成本低、稳定性好且操作简单安全等优势，各项技术指标达到国内领先水平。
                    </div>
                </div>
                <div class="line3">
                    <div class="flow">技术流程</div>
                    <div class="flow-img">
                        <img class="img" id="img" src="../../assets/u12544.png" alt="">
                        <div class="rang"></div>
                    </div>
                </div>
            </div>
            <!-- 右边echart -->
            <div class="right">
                <div class="wrapper">
                    <div class="chart-tab-t">
                        <div class="chart-tab-title">流量</div>
                    </div>
                    <div class="wrapper-content">
                        <div ref="chartRight1" style="width: 100%; height: 100%"></div>
                    </div>
                </div>
                <div class="wrapper">
                    <div class="chart-tab-t">
                        <div class="chart-tab-title">累计流量</div>
                    </div>
                    <div class="wrapper-content">
                        <div ref="chartRight2" style="width: 100%; height: 100%"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 下面echart -->
        <div class="box-height">
            <div class="col-30">
                <div class="box-content">
                    <div class="chart-tab-t">
                        <div class="chart-tab-title">总磷</div>
                    </div>
                    <div class="wrapper-content">
                        <div ref="chartBottom1" style="width: 100%; height: 100%"></div>
                    </div>
                </div>
            </div>
            <div class="col-30">
                <div class="box-content">
                    <div class="chart-tab-t">
                        <div class="chart-tab-title">总氮</div>
                    </div>
                    <div class="wrapper-content">
                        <div ref="chartBottom2" style="width: 100%; height: 100%"></div>
                    </div>
                </div>
            </div>
            <div class="col-30">
                <div class="box-content">
                    <div class="chart-tab-t">
                        <div class="chart-tab-title">PH</div>
                    </div>
                    <div class="wrapper-content">
                        <div ref="chartBottom3" style="width: 100%; height: 100%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    let timer;
    import utils from '../../utils/utils';
    export default {
        name: "environmentalProtection",
        components: {},
        data() {
            return {
                // 当前时间戳
                date: '',
                // 化学需氧量
                optionsHxxyl: {
                    tooltip: {
                        formatter: '{b} : {c}mg/L'
                    },
                    series: [
                        {
                            name: '化学需氧量',
                            type: 'gauge',
                            min: 0,
                            max: 100,
                            splitNumber: 10,
                            radius: '95%',
                            center:['50%','57%'],
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                                    width: 3,
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            axisLabel: {            // 坐标轴小标记
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            },
                            axisTick: {            // 坐标轴小标记
                                length: 15,        // 属性length控制线长
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: 'auto',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            splitLine: {           // 分隔线
                                length: 25,         // 属性length控制线长
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    width: 3,
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            pointer: {           // 分隔线
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5
                            },
                            title: {
                                show:false,
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize: 20,
                                    fontStyle: 'italic',
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            detail: {
                                backgroundColor: 'rgba(30,144,255,0.8)',
                                borderWidth: 1,
                                formatter: '{value}mg/L',
                                borderColor: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5,
                                offsetCenter: [0, '50%'],       // x, y，单位px
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize:18,
                                    color: '#fff'
                                }
                            },
                            data: []
                        }
                    ]
                },
                // 氨氮
                optionsAd: {
                    tooltip: {
                        formatter: '{b} : {c}mg/L'
                    },
                    series: [
                        {
                            name: '氨氮',
                            type: 'gauge',
                            min: 0,
                            max: 10,
                            splitNumber: 10,
                            radius: '95%',
                            center:['50%','57%'],
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                                    width: 3,
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            axisLabel: {            // 坐标轴小标记
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            },
                            axisTick: {            // 坐标轴小标记
                                length: 15,        // 属性length控制线长
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: 'auto',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            splitLine: {           // 分隔线
                                length: 25,         // 属性length控制线长
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    width: 3,
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            pointer: {           // 分隔线
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5
                            },
                            title: {
                                show:false,
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize: 20,
                                    fontStyle: 'italic',
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            detail: {
                                backgroundColor: 'rgba(30,144,255,0.8)',
                                borderWidth: 1,
                                formatter: '{value}mg/L',
                                borderColor: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5,
                                offsetCenter: [0, '50%'],       // x, y，单位px
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize:18,
                                    color: '#fff'
                                }
                            },
                            data: [{value: 1.45, name: '氨氮'}]
                        }
                    ]
                },
                // 流量
                optionsLl: {
                    tooltip: {
                        formatter: '{b} : {c}T/HT'
                    },
                    series: [
                        {
                            name: '流量',
                            type: 'gauge',
                            min: 0,
                            max: 500,
                            splitNumber: 10,
                            radius: '95%',
                            center:['50%','57%'],
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                                    width: 3,
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            axisLabel: {            // 坐标轴小标记
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            },
                            axisTick: {            // 坐标轴小标记
                                length: 15,        // 属性length控制线长
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: 'auto',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            splitLine: {           // 分隔线
                                length: 25,         // 属性length控制线长
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    width: 3,
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            pointer: {           // 分隔线
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5
                            },
                            title: {
                                show:false,
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize: 20,
                                    fontStyle: 'italic',
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            detail: {
                                backgroundColor: 'rgba(30,144,255,0.8)',
                                borderWidth: 1,
                                formatter: '{value}T/H',
                                borderColor: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5,
                                offsetCenter: [0, '50%'],       // x, y，单位px
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize:18,
                                    color: '#fff'
                                }
                            },
                            data: [{value: 156, name: '流量'}]
                        }
                    ]
                },
                // 累计流量
                optionsLjll: {
                    tooltip: {
                        formatter: '{b} : {c}T/HT'
                    },
                    series: [
                        {
                            name: '累计流量',
                            type: 'gauge',
                            min: 0,
                            max: 10000,
                            splitNumber: 10,
                            radius: '95%',
                            center:['50%','57%'],
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                                    width: 3,
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            axisLabel: {            // 坐标轴小标记
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            },
                            axisTick: {            // 坐标轴小标记
                                length: 15,        // 属性length控制线长
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: 'auto',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            splitLine: {           // 分隔线
                                length: 25,         // 属性length控制线长
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    width: 3,
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            pointer: {           // 分隔线
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5
                            },
                            title: {
                                show:false,
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize: 20,
                                    fontStyle: 'italic',
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            detail: {
                                backgroundColor: 'rgba(30,144,255,0.8)',
                                borderWidth: 1,
                                formatter: '{value}T',
                                borderColor: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5,
                                offsetCenter: [0, '50%'],       // x, y，单位px
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize:18,
                                    color: '#fff'
                                }
                            },
                            data: [{value: 871, name: '累计流量'}]
                        }
                    ]
                },
                // 总磷
                optionsZl: {
                    tooltip: {
                        formatter: '{b} : {c}mg/L'
                    },
                    series: [
                        {
                            name: '总磷',
                            type: 'gauge',
                            min: 0,
                            max: 5,
                            splitNumber: 10,
                            radius: '95%',
                            center:['50%','50%'],
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                                    width: 3,
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            axisLabel: {            // 坐标轴小标记
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            },
                            axisTick: {            // 坐标轴小标记
                                length: 15,        // 属性length控制线长
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: 'auto',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            splitLine: {           // 分隔线
                                length: 25,         // 属性length控制线长
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    width: 3,
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            pointer: {           // 分隔线
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5
                            },
                            title: {
                                show:false,
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize: 20,
                                    fontStyle: 'italic',
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            detail: {
                                backgroundColor: 'rgba(30,144,255,0.8)',
                                borderWidth: 1,
                                formatter: '{value}mg/L',
                                borderColor: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5,
                                offsetCenter: [0, '50%'],       // x, y，单位px
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize:18,
                                    color: '#fff'
                                }
                            },
                            data: []
                        }
                    ]
                },
                // 总氮
                optionsZd: {
                    tooltip: {
                        formatter: '{b} : {c}mg/L'
                    },
                    series: [
                        {
                            name: '总氮',
                            type: 'gauge',
                            min: 0,
                            max: 40,
                            splitNumber: 10,
                            radius: '95%',
                            center:['50%','50%'],
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                                    width: 3,
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            axisLabel: {            // 坐标轴小标记
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            },
                            axisTick: {            // 坐标轴小标记
                                length: 15,        // 属性length控制线长
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: 'auto',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            splitLine: {           // 分隔线
                                length: 25,         // 属性length控制线长
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    width: 3,
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            pointer: {           // 分隔线
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5
                            },
                            title: {
                                show:false,
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize: 20,
                                    fontStyle: 'italic',
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            detail: {
                                backgroundColor: 'rgba(30,144,255,0.8)',
                                borderWidth: 1,
                                formatter: '{value}mg/L',
                                borderColor: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5,
                                offsetCenter: [0, '50%'],       // x, y，单位px
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize:18,
                                    color: '#fff'
                                }
                            },
                            data: [{value: 3.51, name: '总氮'}]
                        }
                    ]
                },
                // PH
                optionsPh: {
                    tooltip: {
                        formatter: '{b} : {c}'
                    },
                    series: [
                        {
                            name: 'PH',
                            type: 'gauge',
                            min: 0,
                            max: 20,
                            splitNumber: 10,
                            radius: '90%',
                            center:['50%','50%'],
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                                    width: 3,
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            axisLabel: {            // 坐标轴小标记
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            },
                            axisTick: {            // 坐标轴小标记
                                length: 15,        // 属性length控制线长
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: 'auto',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            splitLine: {           // 分隔线
                                length: 25,         // 属性length控制线长
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    width: 3,
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            pointer: {           // 分隔线
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5
                            },
                            title: {
                                show:false,
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize: 20,
                                    fontStyle: 'italic',
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            detail: {
                                backgroundColor: 'rgba(30,144,255,0.8)',
                                borderWidth: 1,
                                formatter: '{value}/PH',
                                borderColor: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5,
                                offsetCenter: [0, '50%'],       // x, y，单位px
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize:18,
                                    color: '#fff'
                                }
                            },
                            data: [{value: 6.7, name: 'PH'}]
                        }
                    ]
                }
            }
        },
        created() {},
        methods: {
            getRandomIntInclusive(min, max) {
                // min = Math.ceil(min);
                // max = Math.floor(max);
                return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
            },
            getEchartData() {
                const chartLeft1 = this.$refs.chartLeft1;
                const chartLeft2 = this.$refs.chartLeft2;
                const chartRight1 = this.$refs.chartRight1;
                const chartRight2 = this.$refs.chartRight2;
                const chartBottom1 = this.$refs.chartBottom1;
                const chartBottom2 = this.$refs.chartBottom2;
                const chartBottom3 = this.$refs.chartBottom3;

                const myChartLeft1 = this.$echarts.init(chartLeft1);
                const myChartLeft2 = this.$echarts.init(chartLeft2);
                const myChartRight1 = this.$echarts.init(chartRight1);
                const myChartRight2 = this.$echarts.init(chartRight2);
                const myChartBottom1 = this.$echarts.init(chartBottom1);
                const myChartBottom2 = this.$echarts.init(chartBottom2);
                const myChartBottom3 = this.$echarts.init(chartBottom3);
                // 化学需氧量
                this.$http.get('/environment/details')
                .then(res => {
                   if(res.code === 10000) {
                       console.log(res.data);
                       // 化学需氧量
                       let hxlist = [{value: res.data.hxxyl, name: '化学需氧量'}];
                       this.optionsHxxyl.series[0].data = hxlist;
                       // 氨氮
                       let adList =  [{value: res.data.ad, name: '氨氮'}];
                       this.optionsAd.series[0].data = adList;
                       // 总磷
                       let zlList = [{value: res.data.zl, name: '总磷'}];
                       this.optionsZl.series[0].data = zlList;
                       // 总氮
                       let zdList =  [{value: res.data.zd, name: '总氮'}];
                       this.optionsZd.series[0].data = zdList;
                       // ph
                       let phList = [{value: res.data.ph, name: 'PH'}];
                       this.optionsPh.series[0].data = phList;
                       // 流量
                       let llList = [{value: res.data.ws, name: '流量'}];
                       this.optionsLl.series[0].data = llList;
                       // 累计流量
                       let zllList = [{value: res.data.wslj, name: '累计流量'}];
                       this.optionsLjll.series[0].data = zllList;

                       myChartLeft1.setOption(this.optionsHxxyl);
                       myChartLeft2.setOption(this.optionsAd);
                       myChartRight1.setOption(this.optionsLl);
                       myChartRight2.setOption(this.optionsLjll);
                       myChartBottom1.setOption(this.optionsZl);
                       myChartBottom2.setOption(this.optionsZd);
                       myChartBottom3.setOption(this.optionsPh);
                   }
                })


                window.addEventListener("resize", function () {
                    myChartLeft1.resize();
                    myChartLeft2.resize();
                    myChartRight1.resize();
                    myChartRight2.resize();
                    myChartBottom1.resize();
                    myChartBottom2.resize();
                    myChartBottom3.resize();
                });

                this.$on('hook:destroyed:', () => {
                    window.removeEventListener("resize", function() {
                        myChartLeft1.resize();
                        myChartLeft2.resize();
                        myChartRight1.resize();
                        myChartRight2.resize();
                        myChartBottom1.resize();
                        myChartBottom2.resize();
                        myChartBottom3.resize();
                    });
                })
            },
            clearTime() {
                clearInterval(timer);
            },
            setSearInval() {
                timer = setInterval(() => {
                    this.getEchartData();
                }, 180000);
            }
        },

        mounted() {
            let date = Date.parse(new Date());
            this.date = utils.timestamp(date);
            this.getEchartData();
            this.setSearInval();
        },
        beforeRouteLeave (to, from, next) {
            this.clearTime();
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
            next();
        }
    };
</script>

<style lang="scss" scope>
    .environmentalProtection {
        box-sizing: border-box;
        flex-grow: 1;
        color: #eee;
        padding: 20px 20px 10px 20px;
        .flex {
            display: flex;
            .left {
                /*width: 475px;*/
               width: 475px !important;
                .wrapper {
                    border-radius: 8px;
                    height: 300px;
                    /*background-color: #001346;*/
                    overflow: hidden;
                    /*background-image: url('../../assets/box_bg.png');*/
                    /*background-size: 100% 300px;*/
                    margin-bottom: 10px;
                    .chart-tab-t {
                        /*height: 40px;*/
                        padding-left: 80px;
                        line-height: 28px;
                        background-color: #0E1E51;
                        .chart-tab-title {
                            position: relative;
                            font-size: 18px;
                            padding-left: 10px;
                        }
                        .chart-tab-title:before {
                            content: '';
                            width: 14px;
                            height: 14px;
                            border-radius: 50%;
                            position: absolute;
                            left: -20px;
                            top: 50%;
                            background-color: #fff;
                            transform: translateY(-50%);
                            -ms-transform: translateY(-50%);
                            -moz-transform: translateY(-50%);
                            -webkit-transform: translateY(-50%);
                            -o-transform: translateY(-50%);
                        }
                    }
                    .wrapper-content {
                        height: calc(100% - 27.5px);
                        position: relative;
                        background-color: #001346;
                    }
                }
            }
            .right {
                flex: 0 1 475px;
                width: 475px !important;
                .wrapper {
                    border-radius: 8px;
                    height: 300px;
                    /*background-color: #001346;*/
                    overflow: hidden;
                    /*background-image: url('../../assets/box_bg.png');*/
                    /*background-size: 100% 300px;*/
                    margin-bottom: 10px;
                    .chart-tab-t {
                        /*height: 40px;*/
                        padding-left: 80px;
                        line-height: 28px;
                        background-color: #0E1E51;
                        .chart-tab-title {
                            position: relative;
                            font-size: 18px;
                            padding-left: 10px;
                        }
                        .chart-tab-title:before {
                            content: '';
                            width: 14px;
                            height: 14px;
                            border-radius: 50%;
                            position: absolute;
                            left: -20px;
                            top: 50%;
                            background-color: #fff;
                            transform: translateY(-50%);
                            -ms-transform: translateY(-50%);
                            -moz-transform: translateY(-50%);
                            -webkit-transform: translateY(-50%);
                            -o-transform: translateY(-50%);
                        }
                    }
                    .wrapper-content {
                        height: calc(100% - 27.5px);
                        position: relative;
                        background-color: #001346;
                    }
                }
            }
            .center {
                flex-grow: 1;
                margin: 0 30px;
                box-sizing: content-box;
                .line1 {
                    width: 100%;
                    /*text-align: center;*/
                    font-size: 1.3em;
                    display: flex;
                    margin-bottom: 10px;
                    .today {
                        width: 50%;
                        padding-left: 5%;
                        position: relative;
                        /*box-sizing: content-box;*/
                    }
                    .today:after {
                        content: '';
                        height: 0px;
                        width: 52%;
                        border: 1px solid #06dfff;
                        position: absolute;         /*定位背景横线的位置*/
                        top: 40%;
                        left: 40%;
                    }
                    .test {
                        width: 50%;
                        position: relative;
                        /*box-sizing: content-box;*/
                    }
                    .test:after {
                        content: '';
                        height: 0px;
                        width: 52%;
                        border: 1px solid #06dfff;
                        position: absolute;         /*定位背景横线的位置*/
                        top: 40%;
                        left: 30%;
                    }
                }
                .line2 {
                    /*box-sizing: content-box;*/
                    /*width: 100%;*/
                    width: 870px;
                    height: 120px;
                    /*padding: 10px 0;*/
                    /*background-image: url('../../assets/box_bg.png');*/
                    /*background-size: 101% 100%;*/
                    /*margin: 0 20px 10px 20px;*/
                    border-radius: 8px;
                    overflow: hidden;
                    margin: 19px 0;
                    .state {
                        box-sizing: border-box;
                        width: 100%;
                        position: relative;
                        line-height: 20px;
                        padding: 5px 0 5px 80px;
                        font-size: 16px;
                        background-color: #0E1E51;
                    }
                    .state:before {
                        content: '';
                        position: absolute;
                        width: 16px;
                        height: 16px;
                        background-color: white;
                        top: 7px;
                        left: 44px;
                    }
                    .text {
                        box-sizing: border-box;
                        width: 100%;
                        height: 90px;
                        text-indent: 2em;
                        /*margin: 30px auto;*/
                        /*padding: 10px 20px 30px 40px;*/
                        padding: 20px 20px 10px 20px;
                        background-color: #001346;
                    }
                }
                .line3 {
                    /*width: 100%;*/
                    /*height: 445px;*/
                    /*background-image: url('../../assets/box_bg.png');*/
                    /*background-size: 100% 100%;*/
                    border-radius: 8px;
                    overflow: hidden;
                    .flow {
                        position: relative;
                        line-height: 40px;
                        padding-left: 15%;
                        background-color: #0E1E51;
                    }
                    .flow:before {
                        content: '';
                        position: absolute;
                        width: 16px;
                        height: 16px;
                        background-color: white;
                        top: 30%;
                        left: 12%;
                    }
                    .flow-img {
                        /*width: 790px;*/
                        margin: 0 auto;
                        height: 385px;
                        /*padding: 0 20px 20px 25px;*/
                        text-align: center;
                        position: relative;
                        box-sizing: border-box;
                        background-color: #001346;
                        .img {
                            height: 100%;
                        }
                        @keyframes dh {
                            0%{background-color: red;

                            }
                            3% { transform: translate(60px,0px);background-color: red;

                            }
                            6% {transform: translate(60px,92px);background-color: red;

                            }
                            9% {transform: translate(193px,92px);background-color: red;

                            }
                            12% {transform: translate(193px ,21px);background-color: red;

                            }
                            15%{transform: translate(274px ,21px);background-color: red;

                            }
                            18% {transform: translate(274px, 67px);background-color: red;

                            }
                            21% {transform: translate(322px, 67px);background-color: red;

                            }
                            24% {transform: translate(322px, 115px);background-color: red;

                            }
                            27% {transform: translate(457px, 115px);background-color: red;

                            }
                            30% {transform: translate(457px, 50px);background-color: red;

                            }
                            33% {transform: translate(527px, 50px);background-color: red;

                            }
                            36% {transform: translate(527px, 95px);background-color: red;

                            }
                            39% {transform: translate(747px, 100px);background-color: red;

                            }
                            42% {transform: translate(747px, 170px);background-color: red;

                            }
                            45% {transform: translate(662px, 170px);background-color: red;

                            }
                            48% {transform: translate(662px, 315px);background-color: red;

                            }
                            51% {transform: translate(562px, 315px);background-color: red;

                            }
                            54% {transform: translate(562px, 210px);background-color: red;

                            }
                            57% {transform: translate(475px, 210px);background-color: red;

                            }
                            60% {transform: translate(475px, 270px);background-color: red;

                            }
                            63% {transform: translate(346px, 270px);background-color: red;

                            }
                            66% {transform: translate(346px, 180px);background-color: red;

                            }
                            69% {transform: translate(209px, 180px);background-color: red;

                            }
                            72% {transform: translate(209px, 350px);background-color: red;

                            }
                            75% {transform: translate(168px, 350px);background-color: red;

                            }
                            78% {transform: translate(168px, 227px);background-color: red;

                            }
                            81% {transform: translate(94px, 227px);background-color: red;

                            }
                            84% {transform: translate(94px, 273px);background-color: red;

                            }
                            87% {transform: translate(0px, 273px);background-color: red;

                            }
                            90% {transform: translate(0px, 283px);background-color: red;

                            }
                            93% {transform: translate(0px, 293px);
                                background-color: transparent;

                            }
                            96% {transform: translate(0px, 0px);
                                background-color: transparent;

                            }
                            100% { transform: translate(0px, 0px);
                                background-color: transparent;

                            }


                        }
                        .rang {
                            position: absolute;
                            top: 7px;
                            left: 63px;
                            width: 10px;
                            height: 10px;
                            border-radius: 50%;
                            background-color: red;
                            animation: dh 50s linear infinite;
                            animation-fill-mode:forwards;
                        }
                    }
                }
            }
        }
        .box-height {
            display: flex;
            height: calc(100% - 620px);
            border-radius: 8px;
            overflow: hidden;
            background-color: #001346;
            .col-30 {
                width: 33.33%;
                .box-content {
                    border-radius: 6px;
                    overflow: hidden;
                    height: 100%;
                    .chart-tab-t {
                        /*height: 40px;*/
                        padding-left: 130px;
                        line-height: 28px;
                        background-color: #0E1E51;
                        .chart-tab-title {
                            position: relative;
                            font-size: 18px;
                        }
                        .chart-tab-title:before {
                            content: '';
                            width: 14px;
                            height: 14px;
                            border-radius: 50%;
                            position: absolute;
                            left: -20px;
                            top: 50%;
                            background-color: #fff;
                            transform: translateY(-50%);
                            -ms-transform: translateY(-50%);
                            -moz-transform: translateY(-50%);
                            -webkit-transform: translateY(-50%);
                            -o-transform: translateY(-50%);
                        }
                    }
                    .wrapper-content {
                        height: calc(100% - 27.5px);
                        position: relative;
                    }
                }
            }
        }
    }
</style>
