prodog-client-2025
/
client-base-v5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
							<!DOCTYPE html>
<html lang="en">

<head>
    <title>测试界面</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style type="text/css">

    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/locale/zh-cn.js"></script>
    <script type="text/javascript">
        // 方块的宽度、高度
        const rectHeight = 15;
        const rectWidth = 15;

        // 起始点的上坐标和左坐标
        const startTop = 100;
        const startLeft = 100;

        // 每行最多显示的方块数量
        const lineCount = 600;

        let startTimeSec = null;
        let endTimeSec = null;

        /**
         * 初始化界面
         */
        function init(startTime, endTime) {
            

            // 开始时间、结束时间的秒数
            startTimeSec = Math.ceil(moment(startTime).valueOf() / 1000);
            endTimeSec = Math.ceil(moment(endTime).valueOf() / 1000);

            // 结束时间-开始时间的间隔秒数
            let interval = endTimeSec - startTimeSec;

            var myCanvas = document.getElementById("myCanvas");
            myCanvas.width = lineCount * rectWidth + startLeft * 2;
            myCanvas.height = startTop * 2 + (Math.ceil(interval / lineCount) * (rectHeight + 2) * 2);

            var ctx = myCanvas.getContext("2d");
            ctx.fillStyle="#FF0000";
            for (let index = 0; index <= interval; index ++) {
                let lineIndex = Math.floor(index / lineCount);
                let columnIndex = index % lineCount;

                let rectTop = startTop + lineIndex * (rectHeight + 2) * 2;
                let rectLeft = startLeft + (rectWidth * columnIndex);

                ctx.rect(rectLeft, rectTop, rectWidth, rectHeight);
                ctx.rect(rectLeft, rectTop + rectHeight - 1, rectWidth, rectHeight);

                if(columnIndex === 0){
                    let currentSec = (startTimeSec + index) * 1000;
                    let text = moment(currentSec).format('YYYY-MM-DD HH:mm:ss');
                    ctx.fillText(text, 0, rectTop + 10);
                }
            }
            ctx.stroke();
        }

        /**
         * 绘制事件
         */
        function drawEvent(dataArray) {
            var myCanvas = document.getElementById("myCanvas");
            var ctx = myCanvas.getContext("2d");

            for(let index = 0; index < dataArray.length; index ++){
                let data = dataArray[index];
                let sec = Math.ceil(moment(data).valueOf() / 1000);

                let interval = sec - startTimeSec;
                if(interval < 0){
                    continue;
                }

                let lineIndex = Math.floor(interval / lineCount);
                let columnIndex = interval % lineCount;

                let rectTop = startTop + lineIndex * (rectHeight + 2) * 2;
                let rectLeft = startLeft + (rectWidth * columnIndex);

                ctx.fillRect(rectLeft, rectTop, rectWidth, rectHeight);
            }
            ctx.stroke();
        }

        /**
         * 绘制过滤事件
         */
        function drawEventFilter(filterArray){
            var myCanvas = document.getElementById("myCanvas");
            var ctx = myCanvas.getContext("2d");

            for(let index = 0; index < filterArray.length; index ++){
                let data = filterArray[index];

                let startSec = Math.ceil(moment(data.start).valueOf() / 1000);
                let endSec = Math.ceil(moment(data.end).valueOf() / 1000);

                let intervalStart = startSec - startTimeSec;
                intervalStart = (intervalStart <= 0) ? 0 : intervalStart;
                let intervalEnd = endSec - startTimeSec;
                intervalEnd = (intervalEnd <= 0) ? 0 : intervalEnd;

                for (let index = intervalStart; index <= intervalEnd; index ++) {
                    let lineIndex = Math.floor(index / lineCount);
                    let columnIndex = index % lineCount;

                    let rectTop = startTop + lineIndex * (rectHeight + 2) * 2;
                    let rectLeft = startLeft + (rectWidth * columnIndex);

                    ctx.fillRect(rectLeft, rectTop + rectHeight - 1, rectWidth, rectHeight);
                }
            }
            ctx.stroke();
        }
    </script>
</head>

<body>
    <canvas id="myCanvas" width="20000" height="500" style="border:1px solid #000000;">
    </canvas>
</body>

<script>
    // 第一步，给定事件区间
    init('2021-09-01 00:00:00', '2021-09-02 00:00:00');

    // 给出Event数据，并进行绘制
    let dataArray = [];
    for(let i = 0; i < 100; i ++){
        dataArray.push('2021-09-01 00:00:00');
        dataArray.push('2021-09-01 00:00:01');
        dataArray.push('2021-09-01 00:00:02');
        dataArray.push('2021-09-01 00:00:03');
        dataArray.push('2021-09-01 00:00:04');
        dataArray.push('2021-09-01 00:00:06');
        dataArray.push('2021-09-01 00:01:00');
        dataArray.push('2021-09-01 00:01:01');
        dataArray.push('2021-09-01 00:01:02');
        dataArray.push('2021-09-01 09:59:59');
        dataArray.push('2021-09-01 10:00:00');
        dataArray.push('2021-09-01 10:00:01');
        dataArray.push('2021-09-01 10:00:02');
        dataArray.push('2021-09-01 10:00:03');
        dataArray.push('2021-09-02 00:00:00');
    }
    drawEvent(dataArray);

    // 给出EventFilter数据，并进行绘制
    let filterArray = [];
    filterArray.push({
        start: '2021-09-01 00:00:00',
        end: '2021-09-01 00:00:05',
    });
    filterArray.push({
        start: '2021-09-01 00:10:00',
        end: '2021-09-01 00:10:15',
    });
    filterArray.push({
        start: '2021-09-01 00:20:00',
        end: '2021-09-01 00:20:35',
    });
    drawEventFilter(filterArray);

</script>

</html>