layui實現空氣日曆動態日期變色

最近用layui製作webapp中遇到這麼一個需求,動態變化日曆的顏色,如下圖:

代碼如下:

<title>空氣質量日曆</title>

<style type="text/css">
    #air-calendar-laydate .layui-laydate-main {
        width: 100%;
    }

    #air-calendar-laydate .layui-laydate-content td, #test-n1 .layui-laydate-content th {
        width: 60px;
        height: 40px;
    }

    #div_left {
        width: 100%;
        height: 126px;
        background-color: #63ea3b;
        /*padding-top: 100px;*/
    }

    .div_AQI {
        font-size: 14px;
        color: white;
        font-family: 'Microsoft YaHei';
        line-height: 28px;
        text-align: center;
    }

    .div_AQIValue {
        font-size: 34px;
        color: white;
        font-family: 'Microsoft YaHei';
        line-height: 28px;
        padding-top: 10px;
        text-align: center;
    }

    #div_right {
        width: 100%;
        /*height:240px;*/
        padding-top: 39px;
        /*padding-left: 10px;*/
        background-color: white;
    }

    /**/
    .div_Date {
        font-size: 14px;
        color: #657181;
    }

    .div_Vaule {
        font-size: 14px;
        color: darkgrey;
    }

    /*背景圖片*/
    .layui-fluid {
        /*background-image:url(../../src/img/home_bg.png);*/
        background: url(../../src/img/home_bg.png) no-repeat;
        width: 100%;
        height: 100%;
        background-size: cover;
    }

    /*返回箭頭*/
    .backimg {
        position: fixed;
        left: 0;
        margin-left: 16px;
        width: 15px;
    }

    /*標題*/
    #title {
        /*width: 250px;
                height: 47px;*/
        font-family: AdobeHeitiStd-Regular;
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: -1px;
        margin: 5% auto;
        color: #ffffff;
        text-align: center;
    }

    #menu {
        position: fixed;
        width: 100%;
        height: 5%;
        bottom: 0;
        border: 1px solid #ff0000;
    }

    /*日曆樣式*/
    .layui-laydate, .layui-laydate-hint {
        border: 1px solid #d2d2d2;
        box-shadow: 0 2px 4px rgba(0,0,0,.12);
        background-color: #fff;
        color: #666;
        top: 20px;
        /*bottom:40px;*/
        left: 10%;
        width: 80%;
    }

    /*顏色條*/
    .sign {
        margin: 0 10%;
    }
    /*bg1~bg6*/
    .bg1, .bg2, .bg3, .bg4, .bg5, .bg6 {
        color: #fff !important;
        border-radius: 8px !important;
        margin: 1px;
    }
    .bg1 {
        background-color: #63ea3b !important;      
    }

    .bg2 {
        background-color: #ffad37 !important;        
    }

    .bg3 {
        background-color: #ff8837 !important;       
    }

    .bg4 {
        background-color: #ff4f4f !important;       
    }

    .bg5 {
        background-color: #e142f7 !important;      
    }

    .bg6 {
        background-color: #ac1ef6 !important;      
    }

    /*日期按鈕默認樣式*/
    .layui-laydate .layui-this {
        background-color: #ffad37 !important;
        color: #fff !important;
    }




    /*AQI顯示*/
    .aqidata {
        left: 10%;
        width: 80%;
        top: 20px;
        bottom: 100px;
    }


    ul.layui-nav li {
        float: left;
    }

    layui-nav-item a {
        color: red;
    }

    /*.test {
        border-radius: 8px !important;
        background-color: #63ea3b !important;
        color: #fff !important;
        padding: 1px;
    }*/
</style>


<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-xs12" id="title">
            <span><img class="backimg" src="../../src/img/back.png" /></span>
            <span>空氣質量</span>
        </div>
        <div class="layui-col-xs12">
            <div id="air-calendar-laydate"></div>
        </div>
        <div class="layui-col-xs12">
            <div class="layui-row layui-col-space10 sign" style="background-color:whitesmoke;padding-left: 10px;padding-right: 10px; ">
                <!-- <div class="layui-col-xs2" style="height:5px"></div>-->
                <div class="layui-col-xs10">
                    <div class="layui-col-xs2" style="height:5px">0</div>
                    <div class="layui-col-xs2" style="height:5px">50</div>
                    <div class="layui-col-xs2" style="height:5px">100</div>
                    <div class="layui-col-xs2" style="height:5px">150</div>
                    <div class="layui-col-xs2" style="height:5px">200</div>
                    <div class="layui-col-xs2" style="height:5px">300</div>
                </div>
                <!--<div class="layui-col-xs2" style="height:6px"><hr style="height:2px"></div>-->
                <div class="layui-col-xs10">
                    <div class="layui-col-xs2" style="height:5px"><hr class="bg1" style="height:2px"></div>
                    <div class="layui-col-xs2" style="height:5px"><hr class="bg2" style="height:2px"></div>
                    <div class="layui-col-xs2" style="height:5px"><hr class="bg3" style="height:2px"></div>
                    <div class="layui-col-xs2" style="height:5px"><hr class="bg4" style="height:2px"></div>
                    <div class="layui-col-xs2" style="height:5px"><hr class="bg5" style="height:2px"></div>
                    <div class="layui-col-xs2" style="height:5px"><hr class="bg6" style="height:2px"></div>
                </div>
                <!--<div class="layui-col-xs2" style="height:10px">無數據</div>-->
                <div class="layui-col-xs10">
                    <div class="layui-col-xs2" style="height:10px">優</div>
                    <div class="layui-col-xs2">良</div>
                    <div class="layui-col-xs2">輕度</div>
                    <div class="layui-col-xs2">中度</div>
                    <div class="layui-col-xs2">重度</div>
                    <div class="layui-col-xs2">嚴重</div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs12 aqidata">
            <div class="layui-col-xs3">
                <div id="div_left">
                    <div class="div_AQI" id="divAQI">AQI&nbsp;<span id="QUALITYLEVEL">-</span></div>
                    <div class="div_AQIValue" id="divAQIValue">-</div>
                </div>
            </div>
            <div class="layui-col-xs9">
                <div id="div_right">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-xs7">
                            <div id="divAddress">嶽麓區&nbsp;欣盛路</div>
                        </div>
                        <div class="layui-col-xs5">
                            <div class="div_Date" id="MEASURETIME">--</div>
                        </div>
                        <!--<div class="layui-col-xs12">
                            <div id="divAQIValue">細顆粒物:PM2.5</div>
                        </div>-->
                        <div class="layui-col-xs2">
                            <div class="div_Date">PM2.5</div>
                        </div>
                        <div class="layui-col-xs2">
                            <div id="PM2_5" class="div_Vaule">-</div>
                        </div>
                        <div class="layui-col-xs2">
                            <div class="div_Date">PM10</div>
                        </div>
                        <div class="layui-col-xs2">
                            <div id="PM10" class="div_Vaule">-</div>
                        </div>
                        <div class="layui-col-xs2">
                            <div class="div_Date">SO2</div>
                        </div>
                        <div class="layui-col-xs2">
                            <div id="SO2" class="div_Vaule">-</div>
                        </div>
                        <div class="layui-col-xs2">
                            <div class="div_Date">NO2</div>
                        </div>
                        <div class="layui-col-xs2">
                            <div id="NO2" class="div_Vaule">-</div>
                        </div>
                        <div class="layui-col-xs2">
                            <div class="div_Date">O3</div>
                        </div>
                        <div class="layui-col-xs2">
                            <div id="O3" class="div_Vaule">-</div>
                        </div>
                        <div class="layui-col-xs2">
                            <div class="div_Date">CO</div>
                        </div>
                        <div class="layui-col-xs2">
                            <div id="CO" class="div_Vaule">-</div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!--<div class="layui-col-xs12" >
                <ul class="layui-nav" lay-filter="">
                    <li class="layui-nav-item"><a href="">站點</a></li>
                    <li class="layui-nav-item"><a href="">實時數據</a></li>
                    <li class="layui-nav-item layui-this"><a href="">空氣日曆</a></li>
                </ul>
        </div>-->
    </div>
</div>

<script>

    layui.use(['admin', 'laydate', 'setter'], function () {
        //var laydate = layui.laydate;
        var $ = layui.$
         , setter = layui.setter
         , admin = layui.admin
         , element = layui.element
         , laydate = layui.laydate;

        var userinfo = layui.data(setter.tableName, { key: 'userinfo' });
        //console.log("userinfo:", userinfo);

        //直接嵌套顯示
        laydate.render({
            elem: '#air-calendar-laydate'
            , position: 'static'
            , showBottom: false
            , change: function (value, date) { //監聽日期被切換
                //獲取當前選中的年月日
                var y = value.substr(0, 4);//年
                var m = value.substr(5, 2);//月
                var d = value.substr(8, 2);//日

                var startDay = new Date(y, m-1, 1);//選中月第一天
                var lastDay = new Date(y, m, 0);//選中月最後一天
                ChangeDateColor(startDay, lastDay);

                var stime = value + " 00:00:00";
                var etime = value + " 23:59:59";
                //查詢數據,顯示再下方
                GetAQIData(stime, etime);
            }
             , ready: function (date) { //渲染開始
                 $('.layui-this').removeClass('layui-this');//去掉默認選中當前日期
                 var startDay = new Date(date.year, date.month-1, 1);
                 var lastDay = new Date(date.year, date.month, 0);
                 ChangeDateColor(startDay, lastDay);
                 
                 var stime_data = date.year + "-" + date.month + "-" + date.date + " " + "00:00:00";
                 var etime_data = date.year + "-" + date.month + "-" + date.date + " " + "23:59:59";
                 GetAQIData(stime_data, stime_data);
             }
            , done: function (value, date, endDate) {//控件選擇完畢後的回調---點擊日期、清空、現在、確定均會觸發。
            }
        });

        var SO2, NO2, PM2_5, PM10, O3, CO, AQI, MEASURETIME, QUALITYLEVEL;

        //格林尼治時間轉標準時間
        function GMTToStr(time) {
            let date = new Date(time)
            let Str = date.getFullYear() + '-' +
            (date.getMonth() + 1) + '-' +
            date.getDate()
            //+ ' ' +
            //date.getHours() + ':' +
            //date.getMinutes() + ':' +
            //date.getSeconds()
            return Str
        }

        //返回每天的數據的顏色
        function ReturnDayToColor(stime, etime) {
            var ReturnJson = "[";
            var aqidata = { sTime: stime, eTime: etime, Type: "Day", UserID: userinfo.ID, UserName: userinfo.FULLNAME }; //正式時Type改爲Day
            $.ajax({
                url: "./aqidata/GetMDataAQIData",
                type: "POST",
                contentType: 'application/json',
                async: false,
                data: JSON.stringify(aqidata),
                success: function (res) {
                    var color = "COLOURCODE";
                    var time = "MEASURETIME";
                    var quality = "QUALITYLEVEL";
                    if (res.code != 0) {
                        ReturnJson = "null";
                    }
                    else {
                        for (var i = 0; i < res.data.length; i++) {                           
                            ReturnJson += "{"
                            ReturnJson += "\"" + time + "\":\"" + res.data[i].MEASURETIME.substr(0, 10) + "\","
                            ReturnJson += "\"" + quality + "\":\"" + res.data[i].QUALITYLEVEL + "\","
                            ReturnJson += "\"" + color + "\":\"" + res.data[i].COLOURCODE + "\""
                            ReturnJson += "},"
                        }
                        ReturnJson = ReturnJson.substring(0, ReturnJson.lastIndexOf(','))//去除最後一個逗號
                        ReturnJson += "]";
                    }
                }
            })
            return ReturnJson;
        }



        //改變日曆日期的顏色
        function ChangeDateColor(sDay,lDay) {
            var Json_Color = ReturnDayToColor(GMTToStr(sDay), GMTToStr(lDay));//返回的json(時間,顏色編碼,空氣質量等級)
            var newjson = eval('' + Json_Color + '');//json對象解析
            if (newjson != null) {//如果返回的對象不爲空
                for (var i = 0; i < newjson.length; i++) {//遍歷數據
                    switch (newjson[i].QUALITYLEVEL) {//newjson[i].QUALITYLEVEL爲空氣質量等級
                        case "優":
                            $('td[lay-ymd="' + newjson[i].MEASURETIME + '"]').addClass('bg1');
                            break;
                        case "良":
                            $('td[lay-ymd="' + newjson[i].MEASURETIME + '"]').addClass('bg2');
                            break;
                        case "輕度":
                            $('td[lay-ymd="' + newjson[i].MEASURETIME + '"]').addClass('bg3');
                            break;
                        case "中度":
                            $('td[lay-ymd="' + newjson[i].MEASURETIME + '"]').addClass('bg4');
                            break;
                        case "重度":
                            $('td[lay-ymd="' + newjson[i].MEASURETIME + '"]').addClass('bg5');
                            break;
                        case "嚴重":
                            $('td[lay-ymd="' + newjson[i].MEASURETIME + '"]').addClass('bg6');
                            break;
                        default:
                    }
                }
            }
        }

        //獲取城市AQI
        function GetAQIData(stime, etime) {
            var aqidata = { sTime: stime, eTime: etime, Type: "Day", UserID: userinfo.ID, UserName: userinfo.FULLNAME }; //正式時Type改爲Day
            $.ajax({
                url: "./aqidata/GetMDataAQIData",
                type: "POST",
                contentType: 'application/json',
                async: false,
                data: JSON.stringify(aqidata),
                success: function (res) {
                    if (res.code != 0) {
                        document.getElementById("divAQIValue").innerHTML = "-";
                        document.getElementById("MEASURETIME").innerHTML = "-";
                        document.getElementById("QUALITYLEVEL").innerHTML = "-";
                        document.getElementById("SO2").innerHTML = "-";
                        document.getElementById("NO2").innerHTML = "-";
                        document.getElementById("PM2_5").innerHTML = "-";
                        document.getElementById("PM10").innerHTML = "-";
                        document.getElementById("O3").innerHTML = "-";
                        document.getElementById("CO").innerHTML = "-";
                        document.getElementById("div_left").style.backgroundColor = "#63ea3b";//無數據時
                    }
                    else {
                        SO2 = res.data[0].SO2;
                        NO2 = res.data[0].NO2;
                        PM2_5 = res.data[0].PM2_5;
                        PM10 = res.data[0].PM10;
                        O3 = res.data[0].O3;
                        CO = res.data[0].CO;
                        AQI = res.data[0].AQI;
                        MEASURETIME = res.data[0].MEASURETIME;
                        QUALITYLEVEL = res.data[0].QUALITYLEVEL;

                        //根據AQI的等級控制顯示顏色
                        if (QUALITYLEVEL == "優")
                            document.getElementById("div_left").style.backgroundColor = "#63ea3b";
                        if (QUALITYLEVEL == "良")
                            document.getElementById("div_left").style.backgroundColor = "#ffad37";
                        if (QUALITYLEVEL == "輕度")
                            document.getElementById("div_left").style.backgroundColor = "#ff8837";
                        if (QUALITYLEVEL == "中度")
                            document.getElementById("div_left").style.backgroundColor = "#ff4f4f";
                        if (QUALITYLEVEL == "重度")
                            document.getElementById("div_left").style.backgroundColor = "#e142f7";
                        if (QUALITYLEVEL == "嚴重")
                            document.getElementById("div_left").style.backgroundColor = "#ac1ef6";

                        document.getElementById("divAQIValue").innerHTML = AQI;
                        document.getElementById("MEASURETIME").innerHTML = MEASURETIME.substr(0, 10);
                        document.getElementById("QUALITYLEVEL").innerHTML = QUALITYLEVEL;
                        document.getElementById("SO2").innerHTML = SO2;
                        document.getElementById("NO2").innerHTML = NO2;
                        document.getElementById("PM2_5").innerHTML = PM2_5;
                        document.getElementById("PM10").innerHTML = PM10;
                        document.getElementById("O3").innerHTML = O3;
                        document.getElementById("CO").innerHTML = CO;

                    }
                },
                error: function (err) {
                    console.log("err!");
                }
            });
        }

    });

</script>

感覺很nice!!!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章