#

luxiaotao1123

2021-12-30 dc9a8efd24ce40c5799261b95c571dcceb09cde2

#

 static/css/main.css

@@ -53,7 +53,7 @@
    font-style: italic;
    color: #e0e0e0;
    font-size: 12px;
    margin-top: 5px;
    margin-top: 10px;
    opacity: 0.7;
}

@@ -66,8 +66,9 @@


.task-box {
    box-sizing: border-box;
    height: 15%;
    padding: 0 20px;
    padding: 10px 20px;
}
.task-title {
    font-family:"STHeiti",arial,sans-serif;

 static/js/data/sidebar.js

@@ -136,29 +136,29 @@
$('.tbl-body tbody').empty();
$('.tbl-header tbody').empty();
var Items = [
    {"Ranking":"1","City":"保定","SaleIncome":"2506734.43","An":"53.00",},
    {"Ranking":"2","City":"沧州","SaleIncome":"1425935.58","An":"65.00",},
    {"Ranking":"3","City":"秦皇岛","SaleIncome":"1372207.38","An":"34.00",},
    {"Ranking":"4","City":"衡水","SaleIncome":"972451.15","An":"15.00",},
    {"Ranking":"5","City":"石家庄","SaleIncome":"939010.52","An":"-57.00",},
    {"Ranking":"6","City":"邢台","SaleIncome":"774274.70","An":"-20.00",},
    {"Ranking":"7","City":"唐山","SaleIncome":"680456.79","An":"-29.00",},
    {"Ranking":"8","City":"张家口","SaleIncome":"613319.87","An":"2.00",},
    {"Ranking":"9","City":"中油华奥","SaleIncome":"596575.25","An":"35.00",},
    {"Ranking":"10","City":"承德","SaleIncome":"589048.12","An":"30.00",},
    {"Ranking":"11","City":"廊坊","SaleIncome":"515448.14","An":"-48.00",},
    {"Ranking":"12","City":"瑞州","SaleIncome":"399875.26","An":"128.00",},
    {"Ranking":"13","City":"石家庄中油","SaleIncome":"90543.62","An":"-24.00",},
    {"Ranking":"14","City":"辛集中油","SaleIncome":"49255.52","An":"19.00",},
    {"Ranking":"15","City":"井陉中油","SaleIncome":"29682.60","An":"-74.00",},
    {"Ranking":"16","City":"保定中油","SaleIncome":"11887.73","An":"-64.00",}
    {"Type":"条码扫描器","Id":"3","Msg":"2506734232@#21","Time":"12.01",},
    {"Type":"堆垛机","Id":"12","Msg":"32123221234241","Time":"12.02",},
    {"Type":"机械臂","Id":"2","Msg":"137220723238","Time":"12.03",},
    {"Type":"输送线","Id":"308","Msg":"9#7245123115","Time":"14:21",},
    {"Type":"磅秤","Id":"5","Msg":"10.52","Time":"14:22",},
    {"Type":"无人小车","Id":"6","Msg":"2506734232@#21","Time":"14:31",},
    {"Type":"条码扫描器","Id":"2","Msg":"8000081","Time":"14:51",},
    {"Type":"堆垛机","Id":"10","Msg":"#1372213220723238","Time":"15:21",},
    {"Type":"机械臂","Id":"3","Msg":"123212@231","Time":"15:34",},
    {"Type":"磅秤","Id":"2","Msg":"6.3","Time":"15:38",},
    {"Type":"无人小车","Id":"1","Msg":"2506734232@#21","Time":"15:58",},
    {"Type":"条码扫描器","Id":"8","Msg":"12152123","Time":"16:12",},
    {"Type":"堆垛机","Id":"3","Msg":"sda2132###","Time":"16:12",},
    {"Type":"机械臂","Id":"6","Msg":"12234221","Time":"16:15",},
    {"Type":"磅秤","Id":"5","Msg":"6.6","Time":"17:28",},
    {"Type":"无人小车","Id":"3","Msg":"232211123",Time:"7:41",}
]
$.each(Items,function (i, item) {
    str = '<tr>'+
            '<td>'+item.Ranking+'</td>'+
            '<td>'+item.City+'</td>'+
            '<td>'+(+item.SaleIncome/10000).toFixed(2)+'</td>'+
            '<td>'+(+item.An).toFixed(2)+'</td>'
    let str = '<tr>'+
            '<td>'+item.Type+'</td>'+
            '<td>'+item.Id+'</td>'+
            '<td>'+item.Msg+'</td>'+
            '<td>'+item.Time+'</td>'
        '</tr>';

    $('.tbl-body tbody').append(str);
@@ -168,51 +168,25 @@
    $('.tbl-body tbody').html($('.tbl-body tbody').html()+$('.tbl-body tbody').html());
    $('.tbl-body').css('top', '0');
    var tblTop = 0;
    var speedhq = 50; // 数值越大越慢

    var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();

    function Marqueehq(){
        if(tblTop <= -outerHeight*Items.length){
        if(tblTop <= -outerHeight*Items.length/2){
            tblTop = 0;
        } else {
            tblTop -= 1;
        }
        $('.tbl-body').css('top', tblTop+'px');
    }

    var speedhq = 50; // 数值越大越慢
    MyMarhq = setInterval(Marqueehq,speedhq);

    // 鼠标移上去取消事件
    $(".tbl-header tbody").hover(function (){
        clearInterval(MyMarhq);
    },function (){
    }, function (){
        clearInterval(MyMarhq);
        MyMarhq = setInterval(Marqueehq,speedhq);
    })
}
$.each(Items,function (i, item) {
    str = '<tr>'+
        '<td>'+item.Ranking+'</td>'+
        '<td>'+item.City+'</td>'+
        '<td>'+(+item.SaleIncome/10000).toFixed(2)+'</td>'+
        '<td>'+(+item.An).toFixed(2)+'</td>'+
        '</tr>'

    $('.tbl-body tbody').append(str);
    $('.tbl-header tbody').append(str);
});
if(Items.length > 10){
    $('.tbl-body tbody').html($('.tbl-body tbody').html()+$('.tbl-body tbody').html());
    $('.tbl-body').css('top', '0');
    var tblTop = 0;
    var speedhq = 50; // 数值越大越慢
    var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();
    function Marqueehq(){
        if(tblTop <= -outerHeight*Items.length){
            tblTop = 0;
        } else {
            tblTop -= 1;
        }
        $('.tbl-body').css('top', tblTop+'px');
    }
    MyMarhq = setInterval(Marqueehq,speedhq);
}

 views/index.html

@@ -42,16 +42,67 @@
                </div>
                <div class="task-rbl">
                    <select class="task-select">
                        <option value="0">1</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="2">3</option>
                        <option value="2">4</option>
                        <option value="2">5</option>
                        <option value="2">6</option>
                        <option value="2">7</option>
                        <option value="2">8</option>
                        <option value="2">9</option>
                        <option value="1">10</option>
                        <option value="1">11</option>
                        <option value="2">12</option>
                        <option value="2">13</option>
                        <option value="2">14</option>
                        <option value="2">15</option>
                        <option value="2">16</option>
                        <option value="2">17</option>
                        <option value="2">18</option>
                        <option value="2">19</option>
                    </select>
                    <select class="task-select">
                        <option value="0">1</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="2">3</option>
                        <option value="2">4</option>
                        <option value="2">5</option>
                        <option value="2">6</option>
                        <option value="2">7</option>
                        <option value="2">8</option>
                        <option value="2">9</option>
                        <option value="1">10</option>
                        <option value="1">11</option>
                        <option value="2">12</option>
                        <option value="2">13</option>
                        <option value="2">14</option>
                        <option value="2">15</option>
                        <option value="2">16</option>
                        <option value="2">17</option>
                        <option value="2">18</option>
                        <option value="2">19</option>
                    </select>
                    <select class="task-select">
                        <option value="0">1</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="2">3</option>
                        <option value="2">4</option>
                        <option value="2">5</option>
                        <option value="2">6</option>
                        <option value="2">7</option>
                        <option value="2">8</option>
                        <option value="2">9</option>
                        <option value="1">10</option>
                        <option value="1">11</option>
                        <option value="2">12</option>
                        <option value="2">13</option>
                        <option value="2">14</option>
                        <option value="2">15</option>
                        <option value="2">16</option>
                        <option value="2">17</option>
                        <option value="2">18</option>
                        <option value="2">19</option>
                    </select>
                </div>
                <div class="task-confirm">
@@ -66,12 +117,12 @@
                    <div class="tbl-header">
                        <table border="0" cellspacing="0" cellpadding="0" >
                            <thead>
                            <tr>
                                <th>排名</th>
                                <th>地市</th>
                                <th>销售收入(万元)</th>
                                <th>同比(%)</th>
                            </tr>
                                <tr>
                                    <th>设备类型</th>
                                    <th>编号</th>
                                    <th>报文数据</th>
                                    <th>时间</th>
                                </tr>
                            </thead>
                            <tbody style="opacity:0;" ></tbody>
                        </table>
@@ -79,12 +130,12 @@
                    <div class="tbl-body">
                        <table border="0" cellspacing="0" cellpadding="0">
                            <thead>
                            <tr>
                                <th>排名</th>
                                <th>地市</th>
                                <th>销售收入(万元)</th>
                                <th>同比(%)</th>
                            </tr>
                                <tr>
                                    <th>设备类型</th>
                                    <th>编号</th>
                                    <th>报文数据</th>
                                    <th>时间</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>