update:前端页面加载展示逻辑优化v1

src/main/java/top/lvzhiqiang/service/impl/CoinServiceImpl.java

@@ -398,6 +398,7 @@ public class CoinServiceImpl implements CoinService {
                 }
 
                 jsonObject.put("last", last);
+                jsonObject.put("lastStyle", " style=\"color:#252B31;background-color:#C4ADE9;font-weight:bold;\"");
                 jsonObject.put("chaRate", chaRate != null ? chaRate : "--");
                 jsonObject.put("chaRateStyle", " style=\"color:#FFFFFF;background-color:#5EA294;\"");
             } catch (Exception ex) {

src/main/resources/static/coin.html

@@ -45,18 +45,56 @@
             <button class="apis-move-div-button2" slideDiv="apis-move-content">实时启动</button>
             <button class="apis-move-div-button3">实时停止</button>
             <input type="text" style="width: 100px;padding-top: 3px;" class="apis-move-div-input1">
+            <input type="hidden" id="allPositionv2" class="needCustomInput">
+            <input type="hidden" id="orderMarginCoinCurrent" class="needCustomInput">
+            <input type="hidden" id="currentPlan" class="needCustomInput">
         </div>
     </div>
     <div id="apis-move-content" style="display: none;">
-        total:<span class="contentSPAN">0</span>
-        <table border="1" cellspacing="0">
-            <thead>
+        <div id="apis-move-content-allPositionv2" >
+            total:<span class="contentSPAN">0</span>
+            <table border="1" cellspacing="0">
+                <thead>
                 <tr class="contentTH">
                 </tr>
                 </thead>
                 <tbody class="contentTD">
                 </tbody>
             </table>
+        </div>
+        <div id="apis-move-content-orderMarginCoinCurrent" >
+            total:<span class="contentSPAN">0</span>
+            <table border="1" cellspacing="0">
+                <thead>
+                <tr class="contentTH">
+                </tr>
+                </thead>
+                <tbody class="contentTD">
+                </tbody>
+            </table>
+        </div>
+        <div id="apis-move-content-currentPlan">
+            total:<span class="contentSPAN">0</span>
+            <table border="1" cellspacing="0">
+                <thead>
+                <tr class="contentTH">
+                </tr>
+                </thead>
+                <tbody class="contentTD">
+                </tbody>
+            </table>
+        </div>
+        <div id="apis-move-content-other">
+            total:<span class="contentSPAN">0</span>
+            <table border="1" cellspacing="0">
+                <thead>
+                <tr class="contentTH">
+                </tr>
+                </thead>
+                <tbody class="contentTD">
+                </tbody>
+            </table>
+        </div>
     </div>
     <hr/>
     <div style="display: flex;">

src/main/resources/static/js/my-coin.js

@@ -1,7 +1,10 @@
 window.cccField = '';
-window.apisMoveDivButton2Timer;
+window.apisMoveDivButton2Timer = '';
+window.apisMoveDivButton2Timer4Custorm = [];
 window.actualFlag = false;
 
+window.stopFlag = false;
+
 $(function () {
     initOther();
 });
@@ -29,25 +32,40 @@ function initOther() {
 
 
     $(".apis-move-div-button2").click(function () {
+        var this_ = $(this);
+        stopFlag = false;
         if (!actualFlag) {
             var selectedOption = $("select#apis-move-select").find("option:selected");
-            var url = selectedOption.attr("url");
             var nameEn = selectedOption.attr("nameEn");
 
-            var slideDiv = $(this).attr("slideDiv");
+            if (nameEn === 'needCustom') {
+                $.each($(".needCustomInput"), function (index, obj) {
+                    var url = $(obj).attr("url");
+                    var nameEn2 = $(obj).attr("nameEn");
+                    var slideDiv = $(this_).attr("slideDiv") + '-' + $(obj).attr("id");
 
-            apisMoveDivButton2Timer = setInterval(mainSearch, 2000, url, nameEn, slideDiv);
-            actualFlag = true;
+                    apisMoveDivButton2Timer4Custorm[index] = setInterval(mainSearch, 2000, url, nameEn2, slideDiv, "1");
+                });
+                actualFlag = true;
+            } else {
+                var url = selectedOption.attr("url");
+                var slideDiv = $(this).attr("slideDiv");
+
+                apisMoveDivButton2Timer = setInterval(mainSearch, 2000, url, nameEn, slideDiv, "2");
+                actualFlag = true;
+            }
         }
     });
     $(".apis-quiet-div-button2").click(function () {
+        stopFlag = false;
+
         var selectedOption = $("select#apis-quiet-select").find("option:selected");
         var url = selectedOption.attr("url");
         var nameEn = selectedOption.attr("nameEn");
 
         var slideDiv = $(this).attr("slideDiv");
 
-        mainSearch(url, nameEn, slideDiv);
+        mainSearch(url, nameEn, slideDiv, "2");
     });
 
     $(".apis-move-div-button3").click(function () {
@@ -57,7 +75,19 @@ function initOther() {
 
 function ownClearInterval() {
     if (actualFlag) {
-        clearInterval(apisMoveDivButton2Timer);
+        if (apisMoveDivButton2Timer != undefined && apisMoveDivButton2Timer != null) {
+            clearInterval(apisMoveDivButton2Timer);
+        }
+
+        if (apisMoveDivButton2Timer4Custorm != undefined && apisMoveDivButton2Timer != null) {
+            $.each(apisMoveDivButton2Timer4Custorm, function (index, obj) {
+                clearInterval(obj);
+            });
+        }
+
+        $("#apis-move-content").find("tbody.contentTD").html('');
+        $("#apis-move-content").find("span.contentSPAN").html('');
+
         actualFlag = false;
     }
 }
@@ -76,19 +106,33 @@ function initOther4Select() {
 
                 var quietStr = '';
                 var moveStr = '';
+                var move2Str = '';
                 $.each(data, function (index, obj) {
                     if (obj.type2 === 1) {
-                        moveStr += '<option nameEn="' + obj.nameEn + '" url="' + obj.url + '" returnEn="' + obj.returnEn + '" returnCn="' + obj.returnCn + '" value="' + obj.nameEn + '-option">' + obj.nameCn + '</option>';
+                        if (obj.type === 0) {
+                            var nameEn = $('#' + obj.nameEn);
+                            nameEn.attr('nameEn', obj.nameEn);
+                            nameEn.attr('url', obj.url);
+                            nameEn.attr('returnEn', obj.returnEn);
+                            nameEn.attr('returnCn', obj.returnCn);
+
+                            move2Str += obj.nameCn + '|';
+                        } else {
+                            moveStr += '<option type="9999" nameEn="' + obj.nameEn + '" url="' + obj.url + '" returnEn="' + obj.returnEn + '" returnCn="' + obj.returnCn + '" value="' + obj.nameEn + '-option">' + obj.nameCn + '</option>';
+                        }
                     } else if (obj.type2 === 2) {
                         quietStr += '<option nameEn="' + obj.nameEn + '" url="' + obj.url + '" returnEn="' + obj.returnEn + '" returnCn="' + obj.returnCn + '" value="' + obj.nameEn + '-option">' + obj.nameCn + '</option>';
                     }
                 });
 
-                $("select#apis-move-select").html(moveStr);
+                move2Str = '<option nameEn="needCustom" type="9999">' + move2Str.substring(0, move2Str.length - 1) + '</option>';
+                $("select#apis-move-select").html(move2Str + moveStr);
                 $("select#apis-quiet-select").html(quietStr);
 
                 $("select#apis-move-select,select#apis-quiet-select").change(function () {
                     handleSelectChange($(this));
+
+                    stopFlag = true;
                 });
             } else {
                 //alert(data.message);
@@ -108,21 +152,57 @@ function initOther4Select() {
 function handleSelectChange(objj) {
     $.each(objj, function (index, obj) {
         var selectedOption = $(obj).find("option:selected");
-        var returnEn = selectedOption.attr("returnen").split(",");
-        var returnCn = selectedOption.attr("returncn").split(",");
-
-        var theadStr = '';
-        $.each(returnEn, function (index, obj) {
-            theadStr += '<th returnEn="' + obj + '">' + returnCn[index] + '</th>';
-        });
 
-        $(obj).parent("div").next("div").find("span.contentSPAN").html('0');
-        $(obj).parent("div").next("div").find("tr.contentTH").html(theadStr);
-        $(obj).parent("div").next("div").find("tbody.contentTD").html('');
+        var type = selectedOption.attr("type");
+        var nameEn = selectedOption.attr("nameEn");
 
         if ($(obj).attr("id") === 'apis-move-select') {
             ownClearInterval();
         }
+        if (type === '9999') {
+            $("#apis-move-content").find("div").slideUp("slow");
+            if (nameEn === 'needCustom') {
+                $.each($(".needCustomInput"), function (index, ob) {
+                    var returnEn = $(ob).attr("returnen").split(",");
+                    var returnCn = $(ob).attr("returncn").split(",");
+
+                    var theadStr = '';
+                    $.each(returnEn, function (index, o) {
+                        theadStr += '<th returnEn="' + o + '">' + returnCn[index] + '</th>';
+                    });
+
+                    $("#apis-move-content-" + $(ob).attr("id")).find("span.contentSPAN").html('0');
+                    $("#apis-move-content-" + $(ob).attr("id")).find("tr.contentTH").html(theadStr);
+                    $("#apis-move-content-" + $(ob).attr("id")).find("tbody.contentTD").html('');
+                    $("#apis-move-content-" + $(ob).attr("id")).slideDown("slow");
+                });
+            } else {
+                var returnEn = selectedOption.attr("returnen").split(",");
+                var returnCn = selectedOption.attr("returncn").split(",");
+
+                var theadStr = '';
+                $.each(returnEn, function (index, ob) {
+                    theadStr += '<th returnEn="' + obj + '">' + returnCn[index] + '</th>';
+                });
+
+                $("#apis-move-content-other").find("span.contentSPAN").html('0');
+                $("#apis-move-content-other").find("tr.contentTH").html(theadStr);
+                $("#apis-move-content-other").find("tbody.contentTD").html('');
+                $("#apis-move-content-other").slideDown("slow");
+            }
+        } else {
+            var returnEn = selectedOption.attr("returnen").split(",");
+            var returnCn = selectedOption.attr("returncn").split(",");
+
+            var theadStr = '';
+            $.each(returnEn, function (index, obj) {
+                theadStr += '<th returnEn="' + obj + '">' + returnCn[index] + '</th>';
+            });
+
+            $(obj).parent("div").next("div").find("span.contentSPAN").html('0');
+            $(obj).parent("div").next("div").find("tr.contentTH").html(theadStr);
+            $(obj).parent("div").next("div").find("tbody.contentTD").html('');
+        }
     });
 
     $(objj).parent("div").next("div").find(".contentTH").find("th").dblclick(function () {
@@ -134,7 +214,7 @@ function handleSelectChange(objj) {
  * 多条件搜索
  * @param pageNo
  */
-function mainSearch(url, nameEn, slideDiv) {
+function mainSearch(url, nameEn, slideDiv, needCustomFlag) {
     $.ajax({
         url: "coin/mainSearch", //请求的url地址
         dataType: "json", //返回格式为json
@@ -148,12 +228,20 @@ function mainSearch(url, nameEn, slideDiv) {
         success: function (data) {
             //请求成功时处理
             if (data != null && $.trim(data) != "" && data.success) {
+                if (stopFlag) {
+                    return;
+                }
 
                 data = data.data;
                 $('#' + slideDiv).find("span.contentSPAN").html(data.length);
 
-                var selectedOption = $('option[nameen="' + nameEn + '"]');
-                var returnEn = selectedOption.attr("returnen").split(",");
+                var returnEn = '';
+                if (needCustomFlag === '1') {
+                    returnEn = $("#" + nameEn).attr("returnen").split(",");
+                } else {
+                    var selectedOption = $('option[nameen="' + nameEn + '"]');
+                    returnEn = selectedOption.attr("returnen").split(",");
+                }
 
                 var str = '';
                 var title = 'Coin主页|';
@@ -177,6 +265,7 @@ function mainSearch(url, nameEn, slideDiv) {
                     });
                     str += '</tr>';
                 }
+
                 $('#' + slideDiv).find(".contentTD").html(str);
 
                 initContentEvent();