日程展示

痛定思痛。 2022-01-07 20:59 240阅读 0赞

**需求：**

制作一个设计师日程展示（类似时间轴，但是网上都没有类似定制的插件）

[感谢思路][Link 1]

**效果图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hnZzkyMw_size_16_color_FFFFFF_t_70][]

代码（[下载][Link 2]）：

<!DOCTYPE html>
    <html>
    <head>
        <title>设计师日程</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
        <style type="text/css">
            #container {
                font-size: 12px;
                background-color: #ffffff;
                border: 1px solid #cccccc;
                position: relative;
                margin: 0;
            }
    
            #stationContainer {
                background-color: #E5ECFF;
                float: left;
                width: 500px;
                /*padding-top: 30px;*/
                position: relative;
                z-index: 200;
                border-right: 1px solid black;
            }
    
            #stationContainer .header {
                /*border-top: 1px solid black;*/
                width: 100%;
                float: left;
                height: 30px;
                z-index: 300;
            }
    
            #stationContainer .station {
                /*border-top: 1px solid black;*/
                width: 100%;
                float: left;
                height: 100px;
                z-index: 300;
            }
    
            #timeContainer {
                float: left;
                left: 504px;
                display: inline;
                position: absolute;
                z-index: 100;
                width: 720px;
                /*overflow-x: scroll;*/
                /*overflow: hidden;*/
            }
    
            #scrollContainer {
                position: relative;
            }
    
            #timeHeader {
                height: 30px;
                background-color: #eeeeee;
                position: relative;
                overflow: hidden;
            }
    
            #timeHeader .unitTime {
                float: left;
                border-left: 1px solid black;
                z-index: 100;
                height: 10px;
                margin-top: 20px;
                position: absolute;
                text-align: center;
            }
    
            #timeHeader .halfHour {
                margin-top: 10px;
                height: 20px;
            }
    
            #timeHeader .hour {
                height: 30px;
                margin-top: 10px;
            }
    
            #timeBody {
                position: relative;
            }
    
            #timeBody .horizontalStation {
                position: relative;
                width: 100%;
                border-top: 1px solid black;
                height: 100px;
                z-index: 10;
            }
    
    
            .techinian {
                width: 100%;
                height: 100%;
            }
    
            .techinian td {
                width: 125px;
                text-align: center;
                border: 1px solid black;
            }
    
            .car {
                height: 20px;
                line-height: 20px;
                display: inline;
                float: left;
                width: 100px;
                border: 1px solid #0086b3;
                background-color: deepskyblue;
                text-decoration: none;
                position: absolute;
                outline: none;
                /*margin-top: 5px;*/
                top: 0px;
                bottom: 0px;
                padding: 0px;
                /*font-family: 黑体;*/
                color: white;
                font-size: 12px;
                border-radius: 20px;
                z-index: 1;
            }
    
            .car div {
                border-radius: 5px;
                text-align: center;
                height: 20px;
                overflow: hidden;
            }
    
            .virtual {
                border: 2px dashed #000000;
            }
    
            a.car:hover {
                cursor: pointer;
                /*background-color: #00b7ee;*/
                background-color: red;
                text-decoration: none;
            }
    
    
            .type1 {
                background-color: deepskyblue;
            }
            .type2 {
                background-color: Green;
            }
        </style>
        <style type="text/css">
            
            .border_top {
                border-top: 1px solid black;
            }
    
            .border_right {
                border-right: 1px solid black;
            }
    
            .border_left {
                border-left: 1px solid black;
            }
    
            .border_none {
                border: 0 none;
            }
        </style>
        <script type="text/javascript">
            //左边table宽度
            var headTableWidth = 504;
    
    
            var unitMinute = 5, halfHourCount = 30 / unitMinute, hourCount = 60 / unitMinute;
            var unitCount = 24 * (60 / unitMinute);
            var unitPx = 5; //每个格子的宽度加边框
    
    
            $(function () {
                var headerWidth = $("#container").width() - $("#stationContainer").width();
    //        var rightWidth = window.screen.width-headTableWidth;
                var headerWidthMin = 720;
                if (headerWidth < headerWidthMin) {
                    headerWidth = headerWidthMin;
                }
    //        unitPx = 50;
                unitPx = headerWidth / 14;
    
    //        console.log("headerWidth:"+headerWidth);
                console.log("unitPx:" + unitPx);
    
                for (var i = 0; i < 15; i++) {
                    var classstr = " ";
                    var showStr = "";
    
                    if (i < 14) {
                        showStr = (i + 1);
                    }
                    if ((i + 1) % 7 == 0) {
                        showStr += "周日";
                    }
    
                    classstr = "hour";
                    var unitTime = $("<div id='time_" + i + "' class='unitTime " + classstr + "'>" + showStr + "</div>");
                    unitTime.css('left', i * unitPx);
                    unitTime.css('width', unitPx);
                    $("#timeHeader").append(unitTime);
    
                }
    
    
                $("#timeContainer").width(headerWidth);
    
            });
    
    
        </script>
        <script type="text/javascript">
            window['selectedCar'] = '';
            function Car(carData,index) {
    
                console.log("car+"+index);
                var id = carData.id;
                var text = carData.text;
                var textTitle = carData.textTitle;
    //            var stationId = carData.stationId;
                var start = carData.start;
                var endTime = carData.end;
                var durationMinute = endTime - start + 1;
    
                var car = $("<a  style='opacity: 0.7' id='car_" + id + "' href=\"javascript:void(0)\" onclick=\"addZindex(car_" + id + ")\"  stationId='" + index + "' class=\"car  type" + carData.type + "\">" +
                        "<div style='opacity: 1' title='" + textTitle + "'>" + text + "</div>" +
                        "</a>");
                car.width(unitPx * durationMinute);
                car.css('left', (start - 1) * unitPx);
                Car.prototype.Show = function () {
                    $("#station_" + index).append(car);
                    //SetCarPositionByTime(car, startTime.getHours(), startTime.getMinutes());
                }
            }
    
    
            function Station(stationId) {
                var station = $("<div id='station_" + stationId + "' class=\"horizontalStation\"></div>");
                station.height($(".station:first").height());
                Station.prototype.Show = function () {
                    $("#timeBody").append(station);
                }
            }
    
            function ConvertJSONDateToJSDateObject(jsondate) {
                var date = new Date(parseInt(jsondate.replace("/Date(", "").replace(")/", ""), 10));
                return date;
            }
    
            function LoadData() {
                //测试数据
                return generateData();
    
                //后台获取数据逻辑
                var url = '${staticPath}/order/designer-schedule-list';
                $.getJSON(url, function (result) {
                    console.log(result.data);
                    console.log(result.dateInfo);
    
                    window["data"] = result.data;
                    var stations = $("div.station[data-key]");
                    $("#timeBody").html('');
                    for (var i = 0; i < stations.length; i++) {
                        var stationId = $(stations[i]).attr('data-key');
                        var station = new Station(stationId);
                        station.Show();
    //                var carList = data[stationId];
                        console.log("stationId"+stationId)
                        var carList = data[i+1];
                        if (typeof carList == 'undefined') continue;
                        for (var j = 0; j < carList.length; j++) {
                            var carData = carList[j];
                            var car = new Car(carData,i+1);
                            car.Show();
                        }
                    }
                });
            }
    
            function generateData() {
                var data = {
                    '1': [
                        {
                            id: '1',
                            text: '节点：2019-6-18',
                            textTitle: '节点：2019-6-18；备注：1的备注信息，惺惺惜惺惺想寻寻寻寻',
                            start: 1,
                            end: 3,
                            type: 1
                        },
                        {
                            id: '2',
                            text: '节点：2019-6-18；',
                            textTitle: '节点：2019-6-18；备注：1的备注信息，惺惺惜惺惺想寻寻寻寻',
                            start: 4,
                            end: 6,
                            type: 2
                        }
                    ], '2': [
                        {
                            id: '3',
                            text: '节点：2019-6-18；',
                            textTitle: '节点：2019-6-18；备注：2的备注信息，惺惺惜惺惺想寻寻寻寻',
                            start: 4,
                            end: 12,
                            type: 1
                        },
                        {
                            id: '4',
                            text: '节点：2019-6-18；',
                            textTitle: '节点：2019-6-18；备注：2的备注信息，惺惺惜惺惺想寻寻寻寻',
                            start: 9,
                            end: 14,
                            type: 2
                        }
                    ], '3': [
                        {
                            id: '5',
                            text: '节点：2019-6-18；',
                            textTitle: '节点：2019-6-18；备注：3的备注信息，惺惺惜惺惺想寻寻寻寻',
                            start: 2,
                            end: 3,
                            type: 1
                        }
                    ], '4': [
                        {
                            id: '6',
                            text: '节点：2019-6-18；',
                            textTitle: '节点：2019-6-18；备注：4行的备注信息，惺惺惜惺惺想寻寻寻寻',
                            start: 9,
                            end: 12,
                            type: 2
                        },
                        {
                            id: '7',
                            text: '节点：2019-6-18；',
                            textTitle: '节点：2019-6-18；备注：4的备注信息，惺惺惜惺惺想寻寻寻寻',
                            start: 13,
                            end: 15,
                            type: 1
                        }
                    ]
                };
                window["data"] = data;
                var stations = $("div.station[data-key]");
                $("#timeBody").html('');
                for (var i = 0; i < stations.length; i++) {
                    var stationId = $(stations[i]).attr('data-key');
                    var station = new Station(stationId);
                    station.Show();
    //                var carList = data[stationId];
                    console.log("stationId"+stationId)
                    var carList = data[i+1];
                    if (typeof carList == 'undefined') continue;
                    for (var j = 0; j < carList.length; j++) {
                        var carData = carList[j];
                        var car = new Car(carData,i+1);
                        car.Show();
                    }
                }
            }
    
            function Loop() {
            }
    
    
            $(function () {
    
                LoadData();
            });
            /**
             * 元素重叠切换优先级
             * @param _this
             */
            function addZindex(_this) {
                var zindex = $(_this).css("z-index");
                console.log(zindex);
                $(_this).css("z-index", zindex + 1)
                console.log(_this);
            }
        </script>
    </head>
    <body>
    <div id="container">
        <div id="stationContainer">
            <div class="header">
                <table border="0" class="techinian" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="stationTd">
                            设计师
                        </td>
                        <td class='stationTd'>
                            楼盘
                        </td>
                        <td class='stationTd'>
                            首次邀约
                        </td>
                        <td class=''>
                            重复邀约
                        </td>
                    </tr>
                </table>
            </div>
            <div class="station" data-key='1'>
                <table border="0" class="techinian" cellpadding="0" cellspacing="0">
                    <tr>
                        <td rowspan='4' class="stationTd">
                            设计师1
                        </td>
                        <td class='stationTd border_bottom'>
                            楼盘1
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                        <td class='border_bottom'>
                            2019-10-21
                        </td>
                    </tr>
                    <tr>
                        <td class='stationTd border_bottom'>
                            楼盘2
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                        <td class='border_bottom'>
                            2019-10-21
                        </td>
                    </tr>
                    <tr>
                        <td class='stationTd border_bottom'>
                            楼盘3
                        </td>
    
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                        <td class='border_bottom'>
                            2019-10-21
                        </td>
                    </tr>
                    <tr>
                        <td class='stationTd'>
                            楼盘4
                        </td>
    
                        <td class='stationTd'>
                            2019-10-21
                        </td>
                        <td class=''>
                            2019-10-21
                        </td>
                    </tr>
                </table>
            </div>
            <div class="station" data-key='2'>
                <table border="0" class="techinian" cellpadding="0" cellspacing="0">
                    <tr>
                        <td rowspan='4' class="stationTd">
                            设计师2
                        </td>
                        <td class='stationTd border_bottom'>
                            楼盘5
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                    </tr>
                    <tr>
                        <td class='stationTd border_bottom'>
                            楼盘6
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                    </tr>
                    <tr>
                        <td class='stationTd border_bottom'>
                            楼盘7
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                    </tr>
                    <tr>
                        <td class='stationTd'>
                            楼盘8
                        </td>
                        <td class='stationTd'>
                            2019-10-21
                        </td>
                        <td class='stationTd'>
                            2019-10-21
                        </td>
                    </tr>
                </table>
            </div>
            <div class="station" data-key='3'>
                <table border="0" class="techinian" cellpadding="0" cellspacing="0">
                    <tr>
                        <td rowspan='4' class="stationTd">
                            设计师3
                        </td>
                        <td class='stationTd border_bottom'>
                            楼盘9
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                    </tr>
                    <tr>
                        <td class='stationTd border_bottom'>
                            楼盘10
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                    </tr>
                    <tr>
                        <td class='stationTd border_bottom'>
                            楼盘11
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                    </tr>
                    <tr>
                        <td class='stationTd border_bottom'>
                            楼盘12
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                    </tr>
                </table>
            </div>
            <div class="station" data-key='4'>
                <table border="0" class="techinian" cellpadding="0" cellspacing="0">
                    <tr>
                        <td rowspan='4' class="stationTd">
                            设计师4
                        </td>
                        <td class='stationTd border_bottom'>
                            楼盘13
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                    </tr>
                    <tr>
                        <td class='stationTd border_bottom'>
                            楼盘14
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                    </tr>
                    <tr>
                        <td class='stationTd border_bottom'>
                            楼盘3
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                    </tr>
                    <tr>
                        <td class='stationTd border_bottom'>
                            楼盘15
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                        <td class='stationTd border_bottom'>
                            2019-10-21
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="timeContainer">
            <div id="scrollContainer">
                <div id="timeHeader">
                    <div class="unitTime">
                        
                    </div>
                </div>
                <div id="timeBody">
                    <div class="horizontalStation">
                        <a href="#" class="car">
                            <div>
                                车辆1
                            </div>
                        </a><a href="#" class="car">
                        <div>
                            车辆1
                        </div>
                    </a><a href="#" class="car">
                        <div>
                            车辆1
                        </div>
                    </a><a href="#" class="car">
                        <div>
                            车辆1
                        </div>
                    </a>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    <div style="clear: both;">
    </div>
    </div>
    
    </body>
    </html>

作为一个后端人员……改造前端代码，蛋蛋还是疼…………

[Link 1]: https://www.cnblogs.com/huolong/p/3728475.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hnZzkyMw_size_16_color_FFFFFF_t_70]: /images/20211220/e9848353412b4d10ab84a98ace48ace4.png
[Link 2]: https://download.csdn.net/download/hgg923/11265235