layui 搜索加動態添加列

有時候表格得配合chart bar 那種橫向展示帶時間 范圍展示的 那種

 

 

 順帶着圖下邊再加個表格 table

 

 

 與表中數據相同,上邊的列是動態加上去的.

對於這個耗電對比,實現起來還是有點小復雜, 總體原理就是前端table內 列字段由后台組裝,由於table內的data是json串直接懟上去的,有個設備名的列在cols內的直接前端初始化一個一個列頭,不在后台添加

具體為layui table是由 cols 列 和 data組成  cols 內field 是列綁定后台的字段,所以data內的 值與field內的字段是相對應的, 后台展示字段的數據在cols 內和data內都要加進去.要不后台數據無法和前端field內的字段相對應.

在此也碰到了js內轉后台的json對象的時候,數據又重新排序的問題. 導致展示的時候小時是按照從大到小排序,比如昨天的晚上10后的數據排在了今天的數據之后,對於list<string>這種方式是不變化的, 所以程序中后台的列頭沒有共用data內的值,

 

  table.render({
                elem: '#tableId'
                ,@* url: "/AutoNetwork/MeterRealData/List",*@
                size: "sm",
                cols: [hours]
                , data: result             
            });

后台返回值再加了一層

public class Res
        {
           public JsonArray ja { get; set; }
            public List<string> hl { get; set; }
        }

ja 是 table內數據 

hl是列頭數據,只要列頭在前端排序對了,后台的data懟過來是根據hl 內的排序來的.

 

數據庫內采集的數據是從電表內讀值,也就是說里邊的有功電能是那時跑到的數字, 在存的時候也是這個數據,那求每小時耗能,只能是 小時i  減掉小時i-1 時的有功電能 ,

再有就是數據要求每個小時的一個值,由於采集是10分鍾一次,並且每小時最后一次采集時間並不固定. 

如下表

 

select deviceName, datepart(hour, updateTime)as h,datepart(DAY, updateTime) as d ,
max(realData) as reald from   AutoNetwork_MeterRealData where attributeName = N'有功電能' and updatetime > DATEADD(HOUR, -24,
GETDATE()) group by datepart(dd, updatetime),datepart(hour, updateTime),deviceName order by datepart(dd, updatetime)

打開頁面默認是統計24小時內的數據,

group by datepart(dd, updatetime),datepart(hour, updateTime),deviceName  按小時 日  devicename 分組

order by datepart(dd, updatetime) 按小時排序,

max(realData)獲取小組內 最大值
最終過濾計算之后

 

 

得到了兩塊電表 24小時內數據
求小時內耗電量

由於前段格式是動態的,無法在實體類內固定好列字段  最開始想動態添加字段,似乎c#實現起來挺麻煩,后來想前段需要的是json,拼裝成需要的格式就行了,拼裝json的方式\

JsonArray jsonarr = new JsonArray();  //竟然是facebook的庫

 json對象用的是下邊的

Newtonsoft.Json.JsonObject jsonObject1 = new Newtonsoft.Json.JsonObject();

Newtonsoft.Json.JsonObject jsonObject2 = new Newtonsoft.Json.JsonObject();

兩塊電能表分別做好差值

最終

jsonarr.Add(jsonObject1);

jsonarr.Add(jsonObject2);

 

 

  為列頭名,  后邊是值 

 

 

Res re = new Res();
                List<string> hl = new List<string>();
                Newtonsoft.Json.JsonObject jsonObject1 = new Newtonsoft.Json.JsonObject();
                Newtonsoft.Json.JsonObject jsonObject2 = new Newtonsoft.Json.JsonObject();
                //初始化一列 
                {
              //      _log.Info("jsonObject1.Add(devname, 智能電表);");
                    jsonObject1.Add("devname", "智能電表");
                    jsonObject2.Add("devname", "智能電表2");
                 //   _log.Info("jsonObject1.Add(devname, 智能電表2);");
                }
                for (int i = 2; i < dt.Rows.Count; i++) //多取一個數,從2 開始循環, 棄用最小的那個為了第一個數的耗能值
                {
                    if (dt.Rows[i]["deviceName"].ToString() == "智能電表")
                    {
                        float cha = float.Parse(dt.Rows[i]["reald"].ToString()) - float.Parse(dt.Rows[i - 2]["reald"].ToString());
                      //  _log.Info("i= "+i+" ifzhinengdianbiao1 小時" + dt.Rows[i]["h"].ToString() + " 值" + dt.Rows[i]["reald"].ToString());
                        jsonObject1.Add(dt.Rows[i]["d"].ToString()+"-"+dt.Rows[i]["h"].ToString(), cha.ToString());
                      /*  for (int j = 0; j < jsonObject1.Keys.Count; j++)
                        {
                            _log.Info("值 i="+i+"jsonObject1" + jsonObject1.Keys.ToArray()[j] + " 值" + dt.Rows[i]["reald"].ToString());
                        }              */         
                        hl.Add(dt.Rows[i]["d"].ToString() + "-" + dt.Rows[i]["h"].ToString());
                    }
                    if (dt.Rows[i]["deviceName"].ToString() == "智能電表2")
                    {
                        float cha = float.Parse(dt.Rows[i]["reald"].ToString()) - float.Parse(dt.Rows[i - 2]["reald"].ToString());
                    //    _log.Info("ifzhinengdianbiao2 小時" + dt.Rows[i]["h"].ToString() + " 值" + dt.Rows[i]["reald"].ToString());
                        jsonObject2.Add(dt.Rows[i]["d"].ToString() + "-" + dt.Rows[i]["h"].ToString(), cha.ToString());
                    //    _log.Info("ifzhinengdianbiao2");
                    }
                }
              //  _log.Info(" jsonarr.Add(jsonObject1);");
                jsonarr.Add(jsonObject1);
                jsonarr.Add(jsonObject2);
                jsonarr.ToString();
              //  _log.Info(" jsonarr.Add(jsonObject2);");
                //  var retu = jsonarr.ToString();
                re.hl = hl;
                re.ja = jsonarr;

                return re;
            }

 

前端

 <div class="ok-card-body map-body">
                <canvas id="canvas1"></canvas>              
            </div>

 window.onload = function () {
        var ctx1 = document.getElementById('canvas1').getContext('2d');
        window.myBar1 = new Chart(ctx1, {
            type: 'bar',
            data: barChartData1,
            options: {
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: '南屋北屋有功電能對比圖'
                }
            }
        });       
    };

 layui.use(["table", "form", "laydate"], function () {
        let table = layui.table;
        let form = layui.form;
        let laydate = layui.laydate;
        var $ = layui.$;//等同於jquery
        var result;
     //   var hours=new Array();
        laydate.render({
            elem: '#StartDateTime'
            ,type: 'datetime'
           
        });

        var hours = [
           {
                field: 'devname', title: '設備名', align: 'center', width: 90, fixed: true@*, templet: function (d) {
                    return d.LAY_INDEX;
                }*@
            }];
        $.ajax({
            url: "/AutoNetworkNew/EnergyConsumCompare/GetTableData", // //請求路徑
            type: "get",// "post", //請求方式
            dataType: 'json', //期望獲得的返回值類型
            async: false, //是否異步
           @* data: params, //傳遞的參數*@
            success: function (data) {
                console.log(data);
                if (data != '') {                 
                    result = data.ja;
                        var strs = new Array();
                    strs = data.hl;
                    for (var i = 0; i < strs.length; i++) {
                        hours.push({
                            field: strs[i], title: strs[i], align: 'center', width: 80, sort: false
                        });
                    }
                    

                }
            },
            error: function (jqXHR, textStatus, errorThrown) {

                //console.log('狀態碼：' + jqXHR.status);
                //console.log('錯誤信息：' + jqXHR.statusText);
                //console.log('服務器反饋信息：' + textStatus);
            }
        });
       DynamicLoad();
        function DynamicLoad() {
            //動態加載數據
        table.render({
                elem: '#tableId'
                ,@* url: "/AutoNetwork/MeterRealData/List",*@
                size: "sm",
                cols: [hours]
                , data: result             
            });
       }
        laydate.render({
            elem: '#EndDateTime'
            , type: 'datetime'
            , done: function (value, date) {
                var start = $('#StartDateTime').val();
                var end = value;
                var re = CompareDate(start, end);
                if (!re) {
                  // layer.alert('你選擇的日期是：' + value + '<br>獲得的對象是' + JSON.stringify(date));
                    layer.alert('結束時間小於起始時間');
                    $('#EndDateTime').reset();
                }
            }
        });
        form.on('submit(search)', function (data) {
          //  console.log(data);
            $.ajax({
                url: '/AutoNetworkNew/EnergyConsumCompare/GetSerachData',
                type: 'GET',
                data: {
                    StartDateTime: $('#StartDateTime').val()
                    , EndDateTime: $('#EndDateTime').val()
                },
                success: function (data1) {
                     console.log(data1);
                    if (data1.length == 0) {
                        alert("此時辰范圍內,沒有數據");
                        return;
                    }
                    if (barChartData1.labels.length > 0) {
                        barChartData1.labels.length = 0;
                        barChartData1.datasets.length = 0;  //清空
                    }

                    var labhours = data1[0]['hours'];
                    //初始化x軸
                    for (var i = 0; i < labhours.length; i++) {
                        barChartData1.labels.push(labhours[i] + '點');
                    }

                    //根據數量新建datasets
                    for (var i = 0; i < data1.length; i++) {
                        var newDataset = {
                            label: '',
                            backgroundColor: '',// color(dsColor).alpha(0.5).rgbString(),
                            borderColor: '',// dsColor,
                            borderWidth: 1,
                            data: []
                        };

                        if (i === 0) //電能表1 柱顏色
                        {
                            var dsColor = window.chartColors['green'];
                            newDataset.backgroundColor = color(dsColor).alpha(0.5).rgbString();
                            newDataset.borderColor = dsColor;

                        } else if (i === 1) //電能表2
                        {
                            var dsColor1 = window.chartColors['yellow'];
                            newDataset.backgroundColor = color(dsColor1).alpha(0.5).rgbString();
                            newDataset.borderColor = dsColor1;
                        }
                        newDataset.label = data1[i]['devname'];  //柱名
                        var engl = data1[i]['lenergy'];
                        for (var index = 0; index < barChartData1.labels.length; index++) {
                            newDataset.data.push(parseFloat(engl[index]));
                        }
                        barChartData1.datasets.push(newDataset);
                    }
                    window.myBar1.update();
                }
                , error: function (err) {
                    // console.log(err.statusText);
                    console.log('異常');
                }
            });

            //獲取表數據
            $.ajax({
                url: "/AutoNetworkNew/EnergyConsumCompare/GetTableData", // //請求路徑
                type: "get",// "post", //請求方式
                dataType: 'json', //期望獲得的返回值類型
                async: false, //是否異步
                data: {
                    StartDateTime: $('#StartDateTime').val()
                    , EndDateTime: $('#EndDateTime').val()
                },
                success: function (data) {
                    console.log(data);
                    if (data != '') {
                        result = null;
                        result = data.ja;
                        var strs = [];
                        strs = data.hl;
                        hours.length = 0; //清空數組 並重新初始化
                        hours = [
                            {
                                field: 'devname', title: '設備名', align: 'center', width: 90, fixed: true
                            }];
                        for (var i = 0; i < strs.length; i++) {                          
                            hours.push({
                                field: strs[i], title: strs[i], align: 'center', width: 80, sort: false
                            });
                        }
                        DynamicLoad();
                    }
                },
            error: function (jqXHR, textStatus, errorThrown) {

                //console.log('狀態碼：' + jqXHR.status);
                //console.log('錯誤信息：' + jqXHR.statusText);
                //console.log('服務器反饋信息：' + textStatus);
            }
        });
            return false;
        });
    })
    //小時耗能bar
   initCaijiName1();
    function initCaijiName1() {

        $.ajax({
            url: '/AutoNetworkNew/EnergyConsumCompare/GetSerachData',
            type: 'GET',
            success: function (data1) {
             console.log(data1);
                if (data1.length == 0) {
                    alert("此時辰范圍內,沒有數據");
                    return;
                }

                var labhours = data1[0]['hours'];
                //初始化x軸
                for (var i = 0; i < labhours.length; i++) {
                    barChartData1.labels.push(labhours[i] + '點');
                }

                //根據數量新建datasets
                for (var i = 0; i < data1.length; i++) {
                    var newDataset = {
                        label: '',
                        backgroundColor: '',// color(dsColor).alpha(0.5).rgbString(),
                        borderColor: '',// dsColor,
                        borderWidth: 1,
                        data: []
                    };

                    if (i === 0) //電能表1 柱顏色
                    {
                        var dsColor = window.chartColors['green'];
                        newDataset.backgroundColor = color(dsColor).alpha(0.5).rgbString();
                        newDataset.borderColor = dsColor;

                    } else if (i === 1) //電能表2
                    {
                        var dsColor1 = window.chartColors['yellow'];
                        newDataset.backgroundColor = color(dsColor1).alpha(0.5).rgbString();
                        newDataset.borderColor = dsColor1;
                    }
                    newDataset.label = data1[i]['devname'];  //柱名
                    var engl = data1[i]['lenergy'];
                    for (var index = 0; index < barChartData1.labels.length; index++) {
                        newDataset.data.push(parseFloat(engl[index]));
                    }
                    barChartData1.datasets.push(newDataset);
                }
                window.myBar1.update();
            }
            , error: function (err) {
                // console.log(err.statusText);
                console.log('異常');
            }

        });
    }

 於是浩浩盪盪的一連串調整,最終實現了想象中的效果,