fixbug 预定信息大屏幕修改

2021-06-06 20:49:59 +08:00
parent 78745f5907
commit 151576d0ad
3 changed files with 70 additions and 51 deletions
--- a/api/src/main/java/com/sv/netty/config/OrderTools.java
+++ b/api/src/main/java/com/sv/netty/config/OrderTools.java
@@ -3,7 +3,7 @@ package com.sv.netty.config;
 public interface OrderTools {
    String JS = "(function (global) {\n" +
            "        var Timetables = function (option) { this.el = document.querySelector(option.el); this.Timetables = option.timetables || []; this.week = option.week || []; this.merge = typeof option.merge === \"boolean\" ? option.merge : true; \n" +
-            "        this.TimetableType = option.timetableType || []; this.leftHandText = []; this.highlightWeek = option.highlightWeek || \"\"; this.gridOnClick = typeof option.gridOnClick === \"function\" ? option.gridOnClick : undefined; var styles = option.styles || {}; this.leftHandWidth = styles.leftHandWidth || 40; this.Gheight = styles.Gheight || 48; this._init() }; \n" +
+            "        this.TimetableType = option.timetableType || []; this.leftHandText = []; this.highlightWeek = option.highlightWeek || \"\"; this.gridOnClick = typeof option.gridOnClick === \"function\" ? option.gridOnClick : undefined; var styles = option.styles || {}; this.leftHandWidth = styles.leftHandWidth || 40; this.Gheight = 85 / styles.Gheight || 48; this._init() }; \n" +
            "        Timetables.prototype = {\n" +
            "            _init: function (option) {\n" +
            "                var option = option || {}; \n" +
@@ -29,7 +29,7 @@ public interface OrderTools {
            "                courseWrapper.id = \"courseWrapper\"; \n" +
            "                courseWrapper.style.position = \"relative\"; \n" +
            "                courseWrapper.style.paddingLeft = leftHandWidth + \"px\"; \n" +
-            "                courseWrapper.style.border = \"1px solid #dbdbdb\"; \n" +
+            "                courseWrapper.style.border = \"2px solid #000\"; \n" +
            "                TimetableType.forEach(function (item, index) { item.unshift(index + 1) }); \n" +
            "                var leftHand = document.createElement(\"div\"); leftHand.className = \"Courses-leftHand\"; leftHand.style.position = \"absolute\"; leftHand.style.left = 0; leftHand.style.top = 0; leftHand.style.width = leftHandWidth + \"px\"; \n" +
            "                var timetable = Timetables[0].map(function (v, i) { return [] }); \n" +
@@ -44,11 +44,11 @@ public interface OrderTools {
            "                        week.forEach(function (item, index) { var weekItem = document.createElement(\"div\"); var highlightClass = highlightWeek === (index + 1) ? \"highlight-week \" : \"\"; weekItem.className = highlightClass + \"Courses-head-\" + (index + 1); weekItem.innerText = item; weekItem.style.cssFloat = \"left\"; weekItem.style.boxSizing = \"border-box\"; weekItem.style.whiteSpace = \"nowrap\"; weekItem.style.width = 100 / week.length + \"%\"; head.appendChild(weekItem) }); courseWrapper.appendChild(head); \n" +
            "                        var courseListContent = document.createElement(\"div\"); courseListContent.className = \"Courses-content\"; var paletteIndex = 0; \n" +
            "                timetable.forEach(function (values, index) {\n" +
-            "                    var courseItems = document.createElement(\"ul\"); courseItems.style.listStyle = \"none\"; courseItems.style.padding = \"0px\"; courseItems.style.margin = \"0px\"; courseItems.style.minHeight = Gheight + \"px\"; courseItems.className = \"stage_\" + ((TimetableType[0] || [])[0] || \"none\"); --(TimetableType[0] || [])[2]; if (!((TimetableType[0] || [])[2])) { TimetableType.shift() } values.forEach(function (item, i) {\n" +
-            "                        if (i > week.length - 1) { return } var courseItem = document.createElement(\"li\"); courseItem.style.cssFloat = \"left\"; courseItem.style.width = 100 / week.length + \"%\"; courseItem.style.height = Gheight + \"px\"; courseItem.style.boxSizing = \"border-box\"; courseItem.style.position = \"relative\"; \n" +
+            "                    var courseItems = document.createElement(\"ul\"); courseItems.style.listStyle = \"none\"; courseItems.style.padding = \"0px\"; courseItems.style.margin = \"0px\"; courseItems.style.minHeight = Gheight + \"%\"; courseItems.className = \"stage_\" + ((TimetableType[0] || [])[0] || \"none\"); --(TimetableType[0] || [])[2]; if (!((TimetableType[0] || [])[2])) { TimetableType.shift() } values.forEach(function (item, i) {\n" +
+            "                        if (i > week.length - 1) { return } var courseItem = document.createElement(\"li\"); courseItem.style.cssFloat = \"left\"; courseItem.style.width = 100 / week.length + \"%\"; courseItem.style.height = Gheight + \"%\"; courseItem.style.boxSizing = \"border-box\"; courseItem.style.position = \"relative\"; \n" +
            "                        if (item) {\n" +
            "                            courseItem.style.backgroundColor = item.split(\"#\")[1]; courseItem.style.color = \"#000\"; courseItem.className = \"course-hasContent\" } \n" +
-            "                        courseItem.innerText = item.split(\"#\")[0] || \"\";\n" +
+            "                        courseItem.innerHTML = item.split(\"#\")[0] || \"\";\n" +
            "                        courseItem.onclick = function (e) { var allList = document.querySelectorAll(\".Courses-content ul li\").forEach(function (v, i) { v.classList.remove(\"grid-active\") }); this.className = \"grid-active\"; var info = { name: item, week: week[i], index: index + 1, length: merge ? listMerge[i][index].length : 1 }; gridOnClick && gridOnClick(info) }; courseItems.appendChild(courseItem)\n" +
            "                    }); courseListContent.appendChild(courseItems)\n" +
            "                }); courseWrapper.appendChild(courseListContent); courseWrapper.appendChild(leftHand); this.el.appendChild(courseWrapper); var courseItemDomHeight = (document.querySelector(\".stage_1 li\") || document.querySelector(\".stage_none li\")).offsetHeight; var coursesHeadDomHeight = document.querySelector(\".Courses-head\").offsetHeight; var leftHandTextDom = document.createElement(\"div\"); leftHandTextDom.className = \"left-hand-TextDom\"; leftHandTextDom.style.height = coursesHeadDomHeight + \"px\"; leftHandTextDom.style.boxSizing = \"border-box\"; leftHandText.forEach(function (item) { var leftHandTextItem = document.createElement(\"div\"); leftHandTextItem.innerText = item; leftHandTextDom.appendChild(leftHandTextItem) }); leftHand.appendChild(leftHandTextDom); deepCopyTimetableType.forEach(function (item, index) { var handItem = document.createElement(\"div\"); handItem.style.width = \"100%\"; handItem.style.height = courseItemDomHeight * item[1] + \"px\"; handItem.style.boxSizing = \"border-box\"; if (typeof item[0] === \"object\") { for (var v in item[0]) { var handItemInner = document.createElement(\"p\"); handItemInner.innerText = item[0][v]; handItemInner.style.margin = \"0px\"; handItemInner.className = \"left-hand-\" + v; handItem.appendChild(handItemInner) } } else { handItem.innerText = item[0] || \"\" } handItem.className = \"left-hand-\" + (index + 1); leftHand.appendChild(handItem) })\n" +
@@ -94,37 +94,37 @@ public interface OrderTools {
            "}\n" +
            "\n" +
            ".Courses-head > div {\n" +
-            "    border-left: none !important;\n" +
+            "    border-left: 2px solid #000;\n" +
            "}\n" +
            "\n" +
            ".Courses-leftHand > div {\n" +
-            "    padding-top: 5px;\n" +
-            "    border-bottom: 1px dashed rgb(219, 219, 219);\n" +
+            "padding-top: 5px;\n" +
+            "border-bottom: 1px solid #000;\n" +
            "}\n" +
            "\n" +
            ".Courses-leftHand > div:last-child {\n" +
-            "    border-bottom: none !important;\n" +
+            "border-bottom: 2px solid #000 !important;\n" +
            "}\n" +
-            "\n" +
            ".left-hand-TextDom, .Courses-head {\n" +
-            "    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;\n" +
+            "border-bottom: 2px solid #000!important;\n" +
            "}\n" +
            "\n" +
            ".Courses-content > ul {\n" +
-            "    border-bottom: 1px dashed rgb(219, 219, 219);\n" +
-            "    box-sizing: border-box;\n" +
+            "box-sizing: border-box;\n" +
            "}\n" +
            "\n" +
            ".Courses-content > ul:last-child {\n" +
-            "    border-bottom: none !important;\n" +
+            "border-bottom: none !important;\n" +
            "}\n" +
            "\n" +
            ".Courses-content li {\n" +
-            "    text-align: center;\n" +
-            "    color: #666666;\n" +
-            "    font-size: 14px;\n" +
-            "    line-height: 18px;\n" +
-            "}\n" +
+            "text-align: center;\n" +
+            "color: #666666;\n" +
+            "font-size: #fonts#px;\n" +
+            "line-height: #lineHeight#px;\n" +
+            "border-left: 1px solid #000 !important;\n" +
+            "border-bottom: 1px solid #000 !important;\n" +
+            "}" +
            "\n" +
            ".Courses-content li span {\n" +
            "    padding: 6px 2px;\n" +
@@ -145,12 +145,16 @@ public interface OrderTools {
            "}\n" +
            "#qrcode {\n" +
            "    float: right;\n" +
+            "    margin-right: 20px;" +
            "}\n" +
-            "#venue span {\n" +
-            "   float: right;\n" +
-            "   font-size: 20px;\n" +
-            "   margin-right: 40%;\n" +
-            "}\n" +
+            "h1 {\n" +
+            "display:inline;\n" +
+            "float: right;\n" +
+            "color: #fff;\n" +
+            "font-size: 30px;\n" +
+            "margin-right: 36%;\n" +
+            "margin-top: 2px;\n" +
+            "}" +
            "body {\n" +
            "   background-size: 100%;\n" +
            "}";
@@ -164,4 +168,7 @@ public interface OrderTools {
            + "]";

    String BG ="http://smartvenue.oss-cn-beijing.aliyuncs.com/data/WechatIMG48.jpeg";
+
+    Integer REFRESH_TIME = 30;
+
 }
--- a/api/src/main/java/com/sv/netty/controller/AppVenueLessonController.java
+++ b/api/src/main/java/com/sv/netty/controller/AppVenueLessonController.java
@@ -14,6 +14,7 @@ import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.bind.annotation.RestController;

 import javax.annotation.Resource;
+import java.text.MessageFormat;
 import java.time.LocalDate;
 import java.util.ArrayList;
 import java.util.List;
@@ -59,7 +60,7 @@ public class AppVenueLessonController {

    private List<String> fetchDays(LocalDate date) {
        List<String> list = new ArrayList<>();
-        for (int i = 0; i < 4; i++) {
+        for (int i = 0; i < 7; i++) {
            list.add(date.toString());
            date = date.plusDays(1);
        }
@@ -70,24 +71,8 @@ public class AppVenueLessonController {
    private String concatResult(List<VenueLessonStatus> lessonOrder, List<String> th, List<String> lessonTypes, Venue venue) {
        StringBuffer sb = new StringBuffer();
        sb.append("<html><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />" +
-                "<meta http-equiv=\"refresh\" content=\"10\"/><head>");
+                "<meta http-equiv=\"refresh\" content=\"" + OrderTools.REFRESH_TIME + "\"/><head>");
        sb.append("<script>" + OrderTools.JS + "</script>");
-        sb.append("<style>" + OrderTools.STYLE + "</style>");
-        sb.append("</head>");
-        sb.append("<body background = \"" + OrderTools.BG + "\" >");
-        // 显示LOGO && 场馆名 && 二维码
-        sb.append("<div id=\"qrcode\">"
-                + "<img width=\"50\" height=\"50\" src=\"" + venue.getCodeUrl() + "\" />"
-                + "</div>"
-                + "<div id=\"venue\">" +
-                "<img width=\"200\" height=\"50\" src=\"" + OrderTools.LOGO
-                + "\" /><span>"
-                + venue.getName()
-                + "预定信息</span></div>");
-        sb.append("<div id=\"coursesTable\"></div>");
-        sb.append("<script>");
-        sb.append("var week = " + JsonUtils.toJson(th)
-                .replaceAll("\"","'") + ";");
        String courseType = OrderTools.COMMON_TYPE;
        if (lessonTypes != null && lessonTypes.size() >= 0){
            StringBuffer type = new StringBuffer();
@@ -103,6 +88,22 @@ public class AppVenueLessonController {
            type.append("]");
            courseType = type.toString();
        }
+        sb.append("<style>" + getFontsStyle(lessonTypes.size()) + "</style>");
+        sb.append("</head>");
+        sb.append("<body background = \"" + OrderTools.BG + "\" >");
+        // 显示LOGO && 场馆名 && 二维码
+        sb.append("<div id=\"qrcode\">"
+                + "<img width=\"50\" height=\"50\" src=\"" + venue.getCodeUrl() + "\" />"
+                + "</div>"
+                + "<div id=\"venue\">" +
+                "<img width=\"200\" height=\"50\" src=\"" + OrderTools.LOGO
+                + "\" /><h1>"
+                + venue.getName()
+                + "预定信息</h1></div>");
+        sb.append("<div id=\"coursesTable\"></div>");
+        sb.append("<script>");
+        sb.append("var week = " + JsonUtils.toJson(th)
+                .replaceAll("\"","'") + ";");
        sb.append("var courseType = " + courseType + ";");
        String courseList = "[]";
        if (lessonOrder != null && lessonOrder.size() >= 0){
@@ -149,30 +150,40 @@ public class AppVenueLessonController {
                "    week: week,\n" +
                "    timetableType: courseType,\n" +
                "    styles: {\n" +
-                "      Gheight: 100\n" +
+                "      Gheight:" + lessonTypes.size() + "\n" +
                "    }\n" +
                "  });");
        sb.append("</script></body></html>");
        return sb.toString();
    }

+    private String getFontsStyle(int size) {
+        int fonts = (16 - size) + 9;
+        if (fonts > 14) {
+            fonts = 14;
+        }
+        String replace = OrderTools.STYLE.replace("#fonts#", fonts + "")
+                .replace("#lineHeight#", (fonts + 2) + "");
+        return replace;
+    }
+
    private String ForEachCourse(List<VenueLessonStatus> collect) {
        StringBuffer sb = new StringBuffer();
        for (VenueLessonStatus v : collect){
-            sb.append("'" + v.getLessonName() + "(" + v.getStartTime().substring(0,5) + "-" + v.getEndTime().substring(0,5) + ")");
+            sb.append("'" + v.getLessonName() + "<br/>");
            int limitNum = v.getLimitNum();
            if (limitNum <= 0){
-                sb.append("【满额，剩余：0】");
-                sb.append("(" + v.getOrderUsers() + ")");
+                sb.append("满额，剩余：0");
+                sb.append("<br/><marquee>预定人：" + v.getOrderUsers() + "</marquee>");
                sb.append("#DD4822'");
-            } else if (limitNum <= 3){
-                sb.append("【紧张，剩余："+limitNum + "】");
-                sb.append("(" + v.getOrderUsers() + ")");
+            } else if (v.getSaleNum() > 0){
+                sb.append("紧张，剩余："+limitNum);
+                sb.append("<br/><marquee>预定人：" + v.getOrderUsers() + "</marquee>");
                sb.append("#yellow'");
            } else {
                sb.append("【可预定，剩余："+limitNum + "】");
                if (v.getSaleNum() != 0){
-                    sb.append("(" + v.getOrderUsers() + ")");
+                    sb.append("<br/><marquee>预定人：" + v.getOrderUsers() + "</marquee>");
                }
                sb.append("#2BD5D5'");
            }
--- a/service/src/main/resources/mybatis/mapper/sv/VenueLessonMapper.xml
+++ b/service/src/main/resources/mybatis/mapper/sv/VenueLessonMapper.xml
@@ -640,7 +640,8 @@
        and b.`status` != '2'
        GROUP BY b.lesson_id) t on a.id = t.lesson_id
        where DATE(a.date) <![CDATA[ >= ]]> CURRENT_DATE
-        AND DATE(a.date) <![CDATA[ <= ]]> DATE_ADD(CURRENT_DATE,INTERVAL 4 DAY)
+        AND DATE(a.date) <![CDATA[ <= ]]> DATE_ADD(CURRENT_DATE,INTERVAL 7 DAY)
+        and a.deleted = '0'
        and a.venue_id = #{venueId}
        ORDER BY a.date,a.start_time
    </select>