完善导出功能

css/main.css

@@ -132,6 +132,9 @@
     #imp_item>div:hover{
         background: #3B6096;
     }
+    #imp_item .active{
+        background: #3B6096;
+    }
     #top{
         position: fixed;
         top:0;
@@ -422,12 +425,13 @@
     #date_select .triangle{
         width: 0;
         height: 0;
-        border-left: 5px solid transparent;
-        border-right: 5px solid transparent;
-        border-bottom: 8.6px solid #396da9;
         position: absolute;
-        top: -8px;
-        right: 19px;
+        top: 20px;
+        right: -12px;
+        border-width: 6px;
+        border-style: solid;
+        border-color:transparent transparent transparent #396da9 ;
+        border-radius: 4rpx;
     }
     .ui-datepicker-trigger{
         color: #fff;

main.html

@@ -41,17 +41,23 @@
         <label for="datepicker1">开始:</label>
         <input type="text" id="datepicker1" readonly="readonly" style="pointer-events: none;">
     </div>
+    <div style="margin-top: 5px;" class="hourPointSelect">
+        <select id="hourP1" style="margin-left: 34px;width: 147px;border-radius: 4px;height: 18px;"></select>        
+    </div>
     <div style="margin-top: 5px;">
         <label for="datepicker2">结束:</label>
         <input type="text" id="datepicker2" readonly="readonly" style="pointer-events: none;">
     </div>
-    <div style="margin-top: 5px;">
+    <div style="margin-top: 5px;" class="hourPointSelect">
+        <select id="hourP2" style="margin-left: 34px;width: 147px;border-radius: 4px;height: 18px;"></select>        
+    </div>
+    <div style="margin-top: 5px;" class="hourAreaSelect">
         <label>时间:</label>
         <select id="hour1" style="margin-left: 5px;width: 63px;"></select>
         <label>到</label>
         <select id="hour2" style="width: 63px;"></select>
     </div>
-    <div style="margin-top: 5px;">
+    <div style="margin-top: 5px; display: none;">
         <span>设备:</span><input id="imp_devcode" type="text" placeholder="设备编号" maxlength="4"
                                  style="width: 140px;margin-left: 8px;font-size: 12px;">
     </div>
@@ -2263,7 +2269,14 @@
             rangeSelect: true,
             onClose: function (selectedDate) {
                 $("#datepicker2").datepicker("option", "minDate", selectedDate);
-                $("#datepicker2").val('')
+                $("#datepicker2").val('');
+                var isNowDay = selectedDate==new Date().Format("yyyy-MM-dd"); 
+                var hour1Opts = [];
+                var nowHour = new Date().Format("h");
+                for (var i = 0; i < 24; i++) {
+                    if( !isNowDay || (isNowDay && i<=nowHour)) hour1Opts.push('<option value="' + i + '">' + i + ' 时</option>');
+                }
+                $("#hour1,#hourP1").html(hour1Opts.join(''))
             }
         });
 
@@ -2275,8 +2288,19 @@
             changeYear: true,
             numberOfMonths: 1,
             rangeSelect: true,
-            defaultDate: new Date().Format("yyyy-MM-dd")
+            defaultDate: new Date().Format("yyyy-MM-dd"),
+            onClose:function(selectedDate){
+                var isNowDay = selectedDate==new Date().Format("yyyy-MM-dd");                
+                var hour2Opts = [];
+                var nowHour = new Date().Format("h");
+                for (var i = 0; i < 24; i++) {
+                    if( !isNowDay || (isNowDay && i<=nowHour)) hour2Opts.push('<option value="' + i + '">' + i + ' 时</option>');
+                }
+                $("#hour2,#hourP2").html(hour2Opts.join(''))
+            }
         });
+        //日期不能超过当前日期
+        $("#datepicker1,#datepicker2").datepicker("option", "maxDate", new Date().Format("yyyy-MM-dd"));
         $("#date_select,#ui-datepicker-div").on("click", function (e) {
             e.stopPropagation();
         })
@@ -2297,8 +2321,17 @@
         })
         //导出数据项选择
         $("#imp_item>div").on('click', function (e) {
+            $(this).parent().find(".active").removeClass("active");
             //导出数据
-            var code = $(this).attr("itemcode")
+            var code = $(this).addClass("active").attr("itemcode");
+            var $date_select = $("#date_select").attr("itemcode",code)
+            var day = new Date();
+            var day1 = new Date().setDate(day.getDate() - 7)
+            $("#datepicker1").val(new Date(day1).Format("yyyy-MM-dd"))
+            $("#datepicker2").datepicker("option", "minDate", new Date(day1).Format("yyyy-MM-dd"));
+            $("#datepicker2").val(day.Format("yyyy-MM-dd"))
+            $("#hour1,#hourP1").val("7")
+            $("#hour2,#hourP2").val("19")
             switch (parseInt(code)) {
                 case 1:
                     //alert("生产");
@@ -2306,23 +2339,53 @@
                     break;
                 case 2:
                     // alert("停机原因");
-                    window.open(SERVER_URL + "/export/stops?start=2024-07-05%2014:00:00&end=2024-07-05%2018:00:00");
+                    e.stopPropagation();                    
+                    $("#date_select .hourAreaSelect").hide();
+                    $("#date_select .hourPointSelect").show();
+                    $date_select.show().css({
+                        "top": $(this).offset().top-10  + "px",
+                        "left": $("#imp_item").offset().left- $("#date_select").width()-20 + "px"
+                    })                    
                     break;
                 case 3:
                     // alert("叫料");
-                    window.open(SERVER_URL + "/export/export/stops/type/7?start=2024-07-05&end=2024-07-05&st=7&et=19");
+                    e.stopPropagation();                    
+                    $("#date_select .hourAreaSelect").show();
+                    $("#date_select .hourPointSelect").hide();
+                    $date_select.show().css({
+                        "top": $(this).offset().top-10 + "px",
+                        "left": $(this).offset().left -  $("#date_select").width()-20 + "px"
+                    })                    
                     break;
                 case 4:
                     // alert("断纱");
-                    window.open(SERVER_URL + "/export/export/stops/type/1?start=2024-07-05&end=2024-07-05&st=7&et=19");
+                    e.stopPropagation();
+                    $("#date_select .hourAreaSelect").show();
+                    $("#date_select .hourPointSelect").hide();
+                    $date_select.show().css({
+                        "top": $(this).offset().top-10 + "px",
+                        "left": $(this).offset().left -  $("#date_select").width()-20 + "px"
+                    })                    
                     break;
                 case 5:
                     // alert("下卷");
-                    window.open(SERVER_URL + "/export/export/stops/type/6?start=2024-07-05&end=2024-07-05&st=7&et=19");
+                    e.stopPropagation();
+                    $("#date_select .hourAreaSelect").show();
+                    $("#date_select .hourPointSelect").hide();
+                    $date_select.show().css({
+                        "top": $(this).offset().top-10 + "px",
+                        "left": $(this).offset().left -  $("#date_select").width()-20 + "px"
+                    })                    
                     break;
                 case 6:
                     // alert("告警");
-                    window.open(SERVER_URL + "/export/alarms?start=2024-07-05%2014:00:00&end=2024-07-05%2018:00:00");
+                    e.stopPropagation();
+                    $("#date_select .hourAreaSelect").hide();
+                    $("#date_select .hourPointSelect").show();
+                    $date_select.show().css({
+                        "top": $(this).offset().top-10 + "px",
+                        "left": $(this).offset().left -  $("#date_select").width()-20 + "px"
+                    })                    
                     break;
                 case 7:
                     // alert("平方米克重")
@@ -2333,31 +2396,45 @@
                     window.open(SERVER_URL + "/export/warp-run-in");
                     break;
             }
-            //var devcode =$.trim($("#imp_devcode").val())
-
-            // if (code == "2") {
-            //      //自定义日期导出
-            //      e.stopPropagation();
-            //      var day = new Date();
-            //      var day1 = new Date().setDate(day.getDate() - 7)
-            //      $("#datepicker1").val(new Date(day1).Format("yyyy-MM-dd"))
-            //      $("#datepicker2").val(day.Format("yyyy-MM-dd"))
-            //      $("#date_select").show().css({
-            //          "top": $(this).offset().top + 47 + "px",
-            //          "left": $(this).offset().left + $("#imp_item").width() - $("#date_select").width() - 5 + "px"
-            //      })
-            //  } else if (code == "1"){ window.open(SERVER_URL + "/export")
-            //  }else {e.stopPropagation();}
         })
         //自定义导出日期确定
         $("#date_select .dateSelected_ok").on('click', function () {
             var s1 = $("#datepicker1").val()
             var s2 = $("#datepicker2").val()
-            if (s1 == "" || s2 == "") return;
-            var h1 = $("#hour1").val();
-            var h2 = $("#hour2").val();
-            var devcode = $.trim($("#imp_devcode").val())
-            window.open(SERVER_URL + "/export?devcode=" + devcode + "&start=" + s1 + "&end=" + s2 + "&hour=" + h1 + "-" + h2)
+            if (s1 == "" || s2 == "") return;            
+            //var devcode = $.trim($("#imp_devcode").val())
+            var itemcode = $("#date_select").attr("itemcode");
+            switch (parseInt(itemcode)) {
+                case 2:
+                    var h1 = $("#hourP1").val();
+                    var h2 = $("#hourP2").val();
+                    s1 = s1 +" "+h1+":00:00"
+                    s2 = s2 +" "+h2+":00:00"
+                    window.open(SERVER_URL + "/export/stops?start="+s1+"&end="+s2);
+                    break;
+                case 3:
+                    var h1 = $("#hour1").val();
+                    var h2 = $("#hour2").val();
+                    window.open(SERVER_URL + "/export/export/stops/type/7?start="+s1+"&end="+s2+"&st="+h1+"&et="+h2);
+                    break;
+                case 4:
+                    var h1 = $("#hour1").val();
+                    var h2 = $("#hour2").val();
+                    window.open(SERVER_URL + "/export/export/stops/type/1?start="+s1+"&end="+s2+"&st="+h1+"&et="+h2);
+                    break;
+                case 5:
+                    var h1 = $("#hour1").val();
+                    var h2 = $("#hour2").val();
+                    window.open(SERVER_URL + "/export/export/stops/type/6?start="+s1+"&end="+s2+"&st="+h1+"&et="+h2);
+                    break;
+                case 6:
+                    var h1 = $("#hourP1").val();
+                    var h2 = $("#hourP2").val();
+                    s1 = s1 +" "+h1+":00:00"
+                    s2 = s2 +" "+h2+":00:00"
+                    window.open(SERVER_URL + "/export/alarms?start="+s1+"&end="+s2);
+                    break;
+            }
             $("body").trigger('click')
         });
         $("#autoplayer_btn").off().on('click', function () {
@@ -2417,12 +2494,16 @@
                 })
             })
         })
-        var hourOpts = [];
-        for (var i = 0; i < 25; i++) {
-            hourOpts.push('<option value="' + i + '">' + i + ' 时</option>');
+        //初始化小时选择项
+        var hour1Opts = [];
+        var hour2Opts = [];
+        var nowHour = new Date().Format("h");
+        for (var i = 0; i < 24; i++) {
+            hour1Opts.push('<option value="' + i + '">' + i + ' 时</option>');
+            if(i<=nowHour) hour2Opts.push('<option value="' + i + '">' + i + ' 时</option>');
         }
-        $("#hour2,#hour1").html(hourOpts.join(''))
-
+        $("#hour1,#hourP1").html(hour1Opts.join(''))
+        $("#hour2,#hourP2").html(hour2Opts.join(''))
         function GetData() {
             $.getJSON(SERVER_URL + "/index", {}, function (res) {
                 setTimeout(function () {