<!doctype html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>后台登录-X-admin2.2</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">

    <style>
        #exhaustTemperatureDisplay, #exhaustHumidityDisplay {
            float: left;
        }
        #background {
            height: 900px;
        }
    </style>

</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card" id="background">
                <div class="layui-card-body ">
<!--                    <blockquote class="layui-elem-quote">-->
<!--                        特别声明：ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。如需使用，详细了解可以访问官网 <a href="http://echarts.baidu.com/" style="color:red">ECharts</a>。 x-admin不承担任何版权问题。-->
<!--                    </blockquote>-->
                    <div id="exhaustTemperatureDisplay" style="width: 50%;height:300px;"></div>
                    <div id="exhaustHumidityDisplay" style="width: 50%;height:300px;"></div>
                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                    <div id="main" style="width: 100%;height:400px;"></div>
<!--                    <blockquote class="layui-elem-quote">-->
<!--                        注意：本案例的Echarts图表库由cdn引入，需要在线才能正常使用，如想离线，请至Echarts官网下载。-->
<!--                    </blockquote>-->
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script type="text/javascript">

    $(function () {
        //仪表盘，排风温度显示
        var exhaustTemperatureDom = document.getElementById('exhaustTemperatureDisplay');
        var exhaustTemperature = echarts.init(exhaustTemperatureDom);
        var optionExhaustTemperature;

        optionExhaustTemperature = {
            title: {
                text: '排风温度显示'
            },
            series: [
                {
                    max: 50,
                    type: 'gauge',
                    axisLine: {
                        lineStyle: {
                            width: 15,
                            color: [
                                [0.3, '#91c7ae'],
                                [0.7, '#63869e'],
                                [1, '#c23531']
                            ]
                        }
                    },
                    pointer: {
                        itemStyle: {
                            color: 'auto'
                        }
                    },
                    axisTick: {
                        distance: -30,
                        length: 8,
                        lineStyle: {
                            color: '#fff',
                            width: 2
                        }
                    },
                    splitLine: {
                        distance: -30,
                        length: 30,
                        lineStyle: {
                            color: '#fff',
                            width: 4
                        }
                    },
                    axisLabel: {
                        color: 'auto',
                        distance: 0,
                        fontSize: 15
                    },
                    detail: {
                        fontSize: 20,
                        valueAnimation: true,
                        formatter: '{value} ℃',
                        color: 'auto'
                    },
                    data: [
                        {
                            value: 30
                        }
                    ]
                }
            ]
        };
        setInterval(function () {
            exhaustTemperature.setOption({
                series: [
                    {
                        data: [
                            {
                                value: tempReadList[tempReadList.length - 1]
                                /*value: +(Math.random() * 50).toFixed(2)*/
                            }
                        ]
                    }
                ]
            });
        }, 2000);

        optionExhaustTemperature && exhaustTemperature.setOption(optionExhaustTemperature);


        //仪表盘，排风湿度显示
        var exhaustHumidityDom = document.getElementById('exhaustHumidityDisplay');
        var exhaustHumidity = echarts.init(exhaustHumidityDom);
        var optionExhaustHumidity;

        optionExhaustHumidity = {
            title: {
                text: '排风湿度显示'
            },
            series: [
                {
                    type: 'gauge',
                    axisLine: {
                        lineStyle: {
                            width: 15,
                            color: [
                                [0.3, '#91c7ae'],
                                [0.7, '#63869e'],
                                [1, '#c23531']
                            ]
                        }
                    },
                    pointer: {
                        itemStyle: {
                            color: 'auto'
                        }
                    },
                    axisTick: {
                        distance: -30,
                        length: 8,
                        lineStyle: {
                            color: '#fff',
                            width: 2
                        }
                    },
                    splitLine: {
                        distance: -30,
                        length: 30,
                        lineStyle: {
                            color: '#fff',
                            width: 4
                        }
                    },
                    axisLabel: {
                        color: 'auto',
                        distance: 0,
                        fontSize: 15
                    },
                    detail: {
                        fontSize: 20,
                        valueAnimation: true,
                        formatter: '{value} %',
                        color: 'auto'
                    },
                    data: [
                        {
                            value: 70
                        }
                    ]
                }
            ]
        };
        setInterval(function () {
            exhaustHumidity.setOption({
                series: [
                    {
                        data: [
                            {
                                value: humiRaadList[humiRaadList.length - 1]
                                /*value: +(Math.random() * 100).toFixed(2)*/
                            }
                        ]
                    }
                ]
            });
        }, 2000);

        optionExhaustHumidity && exhaustHumidity.setOption(optionExhaustHumidity);



        //折线图
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '排风温度、湿度变化'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['排风温度','排风湿度']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: timeList
                /* data: ['周一','周二','周三','周四','周五','周六','周日']*/
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'排风温度',
                    type:'line',
                    stack: '总量',
                    /*data:[4.98, 46.52, 40.52, 3.8, 25.57, 1.93, 18.95]*/
                    data: tempReadList
                },
                {
                    name:'排风湿度',
                    type:'line',
                    stack: '总量',
                    data: humiRaadList
                    /*data:[2.99, 3.21, 16.63, 10.64, 54.89, 54.33, 84.11]*/
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    });

</script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<script type="text/javascript" th:inline="javascript" >
    var tempReadList = [[${tempReadList}]];
    var humiRaadList = [[${humiReadList}]];
    var timeList = [[${timeList}]];
    tempReadList = tempReadList.reverse()
    humiRaadList = humiRaadList.reverse();
    timeList = timeList.reverse();
    console.log("tempReadList : " + tempReadList);
    console.log("humiRaadList : " + humiRaadList);
    console.log("timeList : " + timeList);
</script>
</body>
</html>