时间段柱状图变化

最终效果：

代码：

    

    
设备选择


完成


    
    
设备稼动率分析


    
分析对象:{$_GET['machine']}
    

        
        
    
    

    选择分析对象

其中遇到的问题：
一个页面调取不同接口展示不同。


解决方法：使用 if …else…

****////////

    

    
设备选择


完成
****/////////

    
    
设备稼动率分析


    
分析对象:{$_GET['machine']}
    

        
        
    
    

    选择分析对象

****/////////

接着就是从后台post数据，循环设备列表，并却通过判断调取接口：

    if ('{$_GET["act"]}' !== 'machine') {
        getChartData()
    } else {
        $.post('{url("statistic/getMachineList")}', function (res) {
            if (res.status) {
                let list = JSON.parse(res.info);
                console.log(list);
                let str = ''
                for (let key in list) {
                    list[key].map(function (item) {
                        str += `
                                

                                    
                                      
                                 
                                    

                                        
${item.name}
                                    
                                `
                    })
                }
                $('.weui-cells').html(str)//////html拼接：取代整个页面进行循环
            } else {
                $.toast(res.info || '请求失败', "forbidden");
            }
        })

        $('#dosubmit').click(function(){
            var checkID = [];
            $("input[name='checkbox']:checked").each(function(i){
                checkID[i] =$(this).val();
            });
        console.log(checkID);
        if(checkID.length !==0){
            location.href="{url('statistic/compare', [bgDate=>$_GET['bgDate'], endDate=>$_GET['endDate']])}" + "&machine=" + checkID;
        }else{
             window.history.back()
        }
        });
    }

还要借助上个页面的链接：

 查看详情  >

        $(".compare").attr('href', '{url("statistic/compare", [ bgDate=>date("Y-m-d 00:00"),endDate=>date("Y-m-d H:i")])}' + '&machine=' + data3_x+ '&machineList=' + data3_y);

调用通过url传值：

    function getQueryString(name) {
        var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
        if (result == null || result.length < 1) {
            return "";
        }
        return result[1];
    }

        var str = getQueryString("machine");
        var strs = getQueryString("machineList");
        var data=str.split(",");
        var datas=strs.split(",");

再就是时间段的判断

 var bgDate = $('#selectTime').val(),
        endDate = $('#selectTimes').val(),
        machineList = getQueryString("machine");

    var d1 = new Date(bgDate.replace(/-/g, "/"));
    var d2 = new Date(endDate.replace(/-/g, "/"));
    if(d1 >=d2)
    {
        alert("开始时间必须小于结束时间！");
        return false;
    }

时间选择之后触发刷新：

  $('.select-time').datetimePicker({
        onClose:function (e) {
            getChartData()
        }
    })

主要是借鉴时间选择器：

   $('#selectYear').picker({
        toolbarTemplate:'
取消完成
',
        cols:[
            {
                textAlign: 'center',
                values:(function () {
                    //5年前到往后10年之间的范围
                    for(var years = [],k=date.getFullYear()-5;k<=date.getFullYear()+10;k++){
                        years.push(k)
                    }
                    return years
                })()
            }
        ],
        value:date.getFullYear(),
        //改变时触发
        onChange:function (re,val,displayValue) {
            // val当前选择的值，displayValue当前显示的值
        },
        //关闭时触发
        onClose:function (e) {
            var year=e.value[0];
            var arr = [
                year, '01','01'
            ];
            var date=arr.join("-");
            window.location.href="{url('statistic/activation')}" + "?date=" + date + "&method=year";
        }
    });

还有一个当选择为空直接完成时，得返回未选择的页面：

      $('#dosubmit').click(function(){
            var checkID = [];
            $("input[name='checkbox']:checked").each(function(i){
                checkID[i] =$(this).val();
            });
        console.log(checkID);
        if(checkID.length !==0){
            location.href="{url('statistic/compare', [bgDate=>$_GET['bgDate'], endDate=>$_GET['endDate']])}" + "&machine=" + checkID;
        }else{
             window.history.back()
        }
        });
    }

一个个问题解决之后就可以看到效果啦。
以及：【css】标签中文字根据宽度自动换行

word-wrap: break-word;
word-break: break-all;
overflow: hidden;

其中百度了很多方法：
【css】标签中文字根据宽度自动换行
https://blog.csdn.net/guo_ridgepole/article/details/84305179
new Date() 日期格式处理
https://blog.csdn.net/qq_39759115/article/details/78893853
JS获取页面通过URL传的参数
https://blog.csdn.net/why15732625998/article/details/70259341
JQuery选取所有复选框被选中的值并用Ajax异步提交数据
https://www.cnblogs.com/luokakale/p/7281628.html
Jquery 数组与字符串之间的转换
https://www.cnblogs.com/wt645631686/p/9881146.html
js判断开始日期（时间）必须小于结束日期（时间）
https://blog.csdn.net/qq_39218765/article/details/80148049
JSON.parse()和JSON.stringify()用法
https://www.cnblogs.com/TigerZhang-home/p/8686836.html
简述 for…in 和 for…of 区别（for let… in…）
https://segmentfault.com/a/1190000014826155

感觉很厉害，还没看的：
https://www.cnblogs.com/moqiutao/p/7097419.html
jQuery与JS中的map()方法使用