|
|
@@ -0,0 +1,175 @@
|
|
|
+<!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>
|