zoie
/
Cold_Api


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610
							<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <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"/>
    <link rel="shortcut icon" href="https://osscold.baozhida.cn/favicon.ico">
    <link rel="bookmark" href="https://osscold.baozhida.cn/favicon.ico">
    <link rel="stylesheet" href="https://osscold.baozhida.cn/css/font.css">
    <link rel="stylesheet" href="https://osscold.baozhida.cn/css/xadmin.css">
    <script src="https://osscold.baozhida.cn/js/jquery.min.js"></script>
    <script src="https://osscold.baozhida.cn/js/jquery.cookie.min.js"></script>
    <script src="https://osscold.baozhida.cn/lib/layui/layui.js" charset="utf-8"></script>
    <script src="https://osscold.baozhida.cn/js/echarts.js" charset="utf-8"></script>
    <script type="text/javascript" src="https://osscold.baozhida.cn/js/xadmin.js"></script>
    <script type="text/javascript" src='https://osscold.baozhida.cn/js/xlsx.full.min.js'></script>

    <style>
        .kuangk{
            border:1px solid;padding: 2px 4px;
            color: #1E9FFF;
            font-size: 20px;
        }
    </style>
</head>

<body>

<div class="layui-fluid">
    <div class="layui-row">
        <!-- // 传感器 选择-->
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">

                        <div class="layui-input-inline layui-show-xs-block">
                            <input id="lefile" type="file" hidden >

                            <div  onclick="document.getElementById('lefile').click();" class="layui-btn layui-btn-normal">
                                <i class="layui-icon">导入数据</i>
                            </div>
                        </div>


                        <div class="layui-input-inline layui-show-xs-block">
                            <label class="layui-form-label">标题：</label>
                            <div class="layui-input-block">
                                <input type="text" onchange="onchanget(this)" name="" value="这里是标题" placeholder="这里是标题" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    <div class="layui-input-inline layui-show-xs-block">
                        <label class="layui-form-label">温度阈值：</label>
                        <div class="layui-input-block">
                            <input type="text" id="T_a" style="width: 50px;float: left;" value="2" autocomplete="off" class="layui-input">
                            <input type="text" id="T_b" style="width: 50px;float: left;" value="30" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-input-inline layui-show-xs-block">
                        <label class="layui-form-label">湿度阈值：</label>
                        <div class="layui-input-block">
                            <input type="text" id="H_a" style="width: 50px;float: left;" value="35"  autocomplete="off" class="layui-input">
                            <input type="text" id="H_b" style="width: 50px;float: left;" value="75"  autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-input-inline layui-show-xs-block" style="float: right">

                        <div class="layui-btn layui-btn-normal" onclick="window.location.href = 'https://osscold.baozhida.cn/js/导入模板.xlsx';">
                            <i class="layui-icon">下载导入模板</i>
                        </div>
                    </div>

                    <hr>
                </div>
                <div class="layui-card-body " >


                    <div  style="width: 99%;height:105px;">
                        <h2 id="T_html_H" style="text-align: center;margin-bottom: 20px;font-size: 25px;">这里是标题</h2>
                        <h3 id="T_html_time" style="text-align: center;width: 33%;float: left;"></h3>
                        <h3 id="T_myChart_1_title" style="text-align: center;width: 33%;float: left;"></h3>
                        <h3 id="T_myChart_2_title" style="text-align: center;width: 33%;float: left;"></h3>
                    </div>
                    <div id="T_myChart_1" style="width: 99%;height:335px;"></div>
                    <div style="width: 99%;height:35px;">

                    </div>
                    <div id="T_myChart_2" style="width: 99%;height:335px;"></div>
                    <div  style="width: 99%;height:35px;">

                    </div>


                </div>
            </div>
        </div>


    </div>


</div>

</div>
</body>

<script>
    // 页面 加载完成后执行
    window.onload = function () {
        console.log("页面 加载完成后执行")
        f_myChart_todata_inte()


    }
    
    function onchanget(t) {
        $("#T_html_H").html(t.value)
    }
</script>

<script>
    var fileType = 0;  //默认0（0不正确，1正确）
    var wb;                                     //读取Excel的数据
    var rABS = false;                      //是否将文件读取为二进制字符串
    var excelTab;                         //Excel
    $("#lefile").on('change',function(){
        var file = $('#lefile').get(0);  //得到文件对象
        var filename = $("#lefile").val();
        var idx = filename.lastIndexOf(".");
        if (idx != -1){
            ext = filename.substr(idx+1).toUpperCase();
            ext = ext.toLowerCase( );
            // alert("ext="+ext);
            if (ext != 'xls' && ext != 'xlsx' ){
                alert("只能上传.xls和.xlsx类型的文件!");
                fileType = 0;
                return;
            }else{
                fileType = 1;
            }
            if(fileType == 0){
                alert("只能上传.xls和.xlsx类型的文件!");
                return;
            }else{
                var file = $('#lefile').get(0);  //得到文件对象
                importf(file);     //进行读取操作
            }
        } else {
            alert("只能上传.xls和.xlsx类型的文件!");
            fileType = 0;
            return;
        }
    })


    function importf(obj) {
        if(!obj.files) {
            return;
        }
        var f = obj.files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
            var data = e.target.result;
            if(rABS) {
                wb = XLSX.read(btoa(fixdata(data)), {//手动转化
                    type: 'base64'
                });
            } else {
                wb = XLSX.read(data, {
                    type: 'binary'
                });
            }

            excelTab = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
            console.log(excelTab);
            printData(excelTab);
        };
        if(rABS) {
            reader.readAsArrayBuffer(f);
        } else {
            reader.readAsBinaryString(f);
        }
    }

    function fixdata(data) { //文件流转BinaryString
        var o = "",
            l = 0,
            w = 10240;
        for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
        o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
        return o;
    }
    name_x = 1
    function printData(excelTab){

        dataList = []
        for( var i = 0; i < excelTab.length; i++ ){

            dataList.push({
                T_t:excelTab[i].温度,
                T_rh:excelTab[i].湿度,
                T_time:excelTab[i].记录时间,
            })
        }
        //例子2
        layer.prompt({
            formType: 0,
            value: '数据'+name_x,
            title: '请输入 监测点名称',
            // area: ['800px', '350px'] //自定义文本域宽高
        }, function(value, index, elem){

            layer.close(index);

            f_Data_to_myChart(value,dataList)
            name_x += 1
        });

    }
</script>

<!-- 多个 图表-->
<script>

    // 最高温度、最低温度、平均温度、超标温度累积时长
    var T_myChart_List_M = []
    var H_myChart_List_M = []

    function f_myChart_todata_inte() {
        T_myChart_List_M = [] // 清空
        H_myChart_List_M = [] // 清空
        $("#T_myChart_2").show()
        $("#T_myChart_2_title").show()
        T_myChart = echarts.init(document.getElementById('T_myChart_1'));
        H_myChart = echarts.init(document.getElementById('T_myChart_2'));
        $("#T_myChart_1_title").html("")
        $("#T_myChart_2_title").html("")


        T_time_a = new Date("2099-05-08 00:00:00").getTime();
        T_time_b = new Date("2000-05-08 00:00:00").getTime();

    }

    var M_T_n_max = 0
    var M_T_n_min = 999
    var M_T_n_ave_num = 0
    var M_T_n_ave_sum = 0

    var M_H_n_max = 0
    var M_H_n_min = 999
    var M_H_n_ave_num = 0
    var M_H_n_ave_sum = 0


    var T_time_a = ""
    var T_time_b = ""


    function f_Data_to_myChart(List_name,data) {
        data_1 = []
        data_2 = []

        console.log(data)
        T_time_a

        for (let i = 0; i < data.length; i++) {

            startT = new Date(data[i].T_time).getTime();

            if(startT < T_time_a){
                T_time_a = startT

                $("#T_html_time").html("<spen class='kuangk'>时间："+timestampToTime(T_time_a)+" ~ "+timestampToTime(T_time_b)+"</spen>")

            }
            if(startT > T_time_b){
                T_time_b = startT

                $("#T_html_time").html("<spen class='kuangk'>时间："+timestampToTime(T_time_a)+" ~ "+timestampToTime(T_time_b)+"</spen>")

            }
            // 温度
            if (data[i].T_t == undefined) continue;
            if (data[i].T_t == "") continue;
            data[i].T_t = parseFloat(data[i].T_t)
            data_1.unshift([data[i].T_time,data[i].T_t])
            if(data[i].T_t > M_T_n_max){
                M_T_n_max = data[i].T_t
            }
            if(data[i].T_t < M_T_n_min){
                M_T_n_min = data[i].T_t
            }
            M_T_n_ave_num += 1
            M_T_n_ave_sum += data[i].T_t


            // 湿度
            if (data[i].T_rh == undefined) continue;
            if (data[i].T_rh == "") continue;
            data[i].T_rh = parseFloat(data[i].T_rh)
            data_2.unshift([data[i].T_time,data[i].T_rh])

            if(data[i].T_rh > M_H_n_max){
                M_H_n_max = data[i].T_rh
            }
            if(data[i].T_rh < M_H_n_min){
                M_H_n_min = data[i].T_rh
            }

            M_H_n_ave_num += 1
            M_H_n_ave_sum += data[i].T_rh


        }
        console.log("M_T_n_ave_num:",M_T_n_ave_num)
        console.log("M_T_n_ave_sum:",M_T_n_ave_sum)
        $("#T_myChart_1_title").html("<spen class='kuangk' style='width: 120px;'>最高温度:"+parseFloat(M_T_n_max).toFixed(1)+"℃</spen><spen class='kuangk' style='width: 120px;'>最低温度"+parseFloat(M_T_n_min).toFixed(1)+"℃</spen><spen class='kuangk' style='width: 120px;'>平均温度:"+parseFloat(M_T_n_ave_sum/M_T_n_ave_num).toFixed(1)+"℃</spen> ")


        $("#T_myChart_2_title").html("<spen class='kuangk' style='width: 120px;'>最高湿度:"+parseFloat(M_H_n_max).toFixed(1)+"%</spen><spen class='kuangk' style='width: 120px;'>最低湿度"+parseFloat(M_H_n_min).toFixed(1)+"%</spen><spen class='kuangk' style='width: 120px;'>平均湿度:"+parseFloat(M_H_n_ave_sum/M_H_n_ave_num).toFixed(1)+"%</spen> ")


        T_myChart_List_M.push({
            name: List_name,
            type: 'line',
            // stack: 'Total',
            smooth: true,
            data: data_1,
            // markLine: {
            //     data: [
            //         {
            //             silent:true,             //鼠标悬停事件  true没有，false有
            //             lineStyle:{               //警戒线的样式  ，虚实  颜色
            //                 type:"solid",
            //                 color:"#FF4200",
            //                 width: 3,
            //             },
            //             label:{
            //                 position:'end',
            //                 formatter:"下限("+data[0].T_Tlower+"℃)"
            //             },
            //             yAxis:data[0].T_Tlower
            //         },
            //         {
            //             silent:true,             //鼠标悬停事件  true没有，false有
            //             lineStyle:{               //警戒线的样式  ，虚实  颜色
            //                 type:"solid",
            //                 color:"#FF4200",
            //                 width: 3,
            //             },
            //             label:{
            //                 position:'end',
            //                 formatter:"上限("+data[0].T_Tupper+"℃)"
            //             },
            //             yAxis:data[0].T_Tupper
            //         }
            //     ]
            // }
        })


        H_myChart_List_M.push({
            name: List_name,
            type: 'line',
            // stack: 'Total',
            smooth: true,
            data: data_2,
            // markLine: {
            //     data: [
            //         {
            //             silent:true,             //鼠标悬停事件  true没有，false有
            //             lineStyle:{               //警戒线的样式  ，虚实  颜色
            //                 type:"solid",
            //                 color:"#FF4200",
            //                 width: 3,
            //             },
            //             label:{
            //                 position:'end',
            //                 formatter:"下限("+data[0].T_RHlower+"℃)"
            //             },
            //             yAxis:data[0].T_RHlower
            //         },
            //         {
            //             silent:true,             //鼠标悬停事件  true没有，false有
            //             lineStyle:{               //警戒线的样式  ，虚实  颜色
            //                 type:"solid",
            //                 color:"#FF4200",
            //                 width: 3,
            //             },
            //             label:{
            //                 position:'end',
            //                 formatter:"上限("+data[0].T_RHupper+"℃)"
            //             },
            //             yAxis:data[0].T_RHupper
            //         }
            //     ]
            // }
        })


        var T_myChart_option_1 = {
            // title: {
            //     top: '50px',
            //     text: T_name+"["+T_id+"]：" + $("#Time_start").val() + '~' + $("#Time_end").val(),
            //     textStyle:{
            //         fontSize:14,
            //     }
            // },
            tooltip: {
                trigger: 'axis'
            },

            toolbox: {
                show: false,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            grid: {
                top: '40px',
                left: '10px',
                right: '10px',
                bottom: '50px',
                containLabel: true
            },
            legend: {
                textStyle:{
                    color:"#7c7c7c"
                }
            },
            xAxis: {
                type: 'time',
                boundaryGap: false,

            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C'
                },
                boundaryGap: [0, '100%'],
                max:$("#T_a").val(),
                min:$("#T_b").val(),
            },

            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 100
                },
                {
                    start: 0,
                    end: 100
                }
            ],
            markPoint: {
                // data: [ {
                //     name: '最大值',
                //     type: 'max'
                // },{
                //     name: '最小值',
                //     type: 'min'
                // }
                // ]
            },

            series: T_myChart_List_M
        };

        // 初始化 图表
        T_myChart.setOption(T_myChart_option_1);


        var T_myChart_option_2 = {
            // title: {
            //     top: '50px',
            //     text: T_name+"["+T_id+"]：" + $("#Time_start").val() + '~' + $("#Time_end").val(),
            //     textStyle:{
            //         fontSize:14,
            //     }
            // },
            tooltip: {
                trigger: 'axis'
            },

            toolbox: {
                show: false,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            grid: {
                top: '40px',
                left: '10px',
                right: '10px',
                bottom: '50px',
                containLabel: true
            },
            legend: {
                textStyle:{
                    color:"#7c7c7c"
                }
            },
            xAxis: {
                type: 'time',
                boundaryGap: false,
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} %'
                },
                boundaryGap: [0, '100%'],
                max:$("#H_a").val(),
                min:$("#H_b").val(),
            },

            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 100
                },
                {
                    start: 0,
                    end: 100
                }
            ],
            markPoint: {
                // data: [ {
                //     name: '最大值',
                //     type: 'max'
                // },{
                //     name: '最小值',
                //     type: 'min'
                // }
                // ]
            },

            series: H_myChart_List_M
        };

        // 初始化 图表
        H_myChart.setOption(T_myChart_option_2);

    }

    
    //
    // function f_Refresh_T_myChart_1() {
    //     T_myChart_1.clear();
    //     //
    //     // T_myChart_option_1.title.text =
    //     T_myChart_option_1.series = T_myChart_List_1
    //     T_myChart_option_1.yAxis.max = T_myChart_max_1
    //     T_myChart_option_1.yAxis.min = T_myChart_min_1
    //     T_myChart_option_1.yAxis.axisLabel.formatter = '{value} ℃'
    //     T_myChart_1.setOption(T_myChart_option_1);
    // }

</script>


<script>
    function timestampToTime(timestamp) {
        if(timestamp.length == 10) {
            timestamp = timestamp * 1000
        }
        var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate()< 10 ? '0' +date.getDate() + ' ': date.getDate() + ' ';
        var h = date.getHours()< 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
        var m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
        var s = date.getSeconds() < 10 ? '0' + date.getSeconds()  : date.getSeconds() ;
        return Y + M + D + h + m + s;
    }


</script>

</html>