前端电梯BI实时看板–电梯门开关状态
分析
说明
- 后期可以考虑乘客抢电梯状态.
- 模拟值之所以用固定值, 是为了方便运行效果更加直观, 便于理解电梯运行状态的过程.
源码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>电梯开关demo</title>
<link rel="stylesheet" href="../static/css/index.css" />
</head>
<body>
<div class="content">
<h1>电梯BI实时看板--电梯门开关状态</h1>
<!-- 开状态区域 -->
<div class="on">
<!-- 状态图区 -->
<div id="onLeft" class="left"></div>
<!-- 动态数据区 -->
<div class="right">
<p>
<label>运行次数:</label>
<span id="onCount">0</span>
</p>
<p>
<label>开始时间:</label>
<span id="onStartTime">-</span>
</p>
<p>
<label>结束时间:</label>
<span id="onEndTime">-</span>
</p>
<p>
<label>开始-结束时长:</label>
<span id="onTimeSlot">0</span>
</p>
</div>
<h3>开</h3>
</div>
<!-- 关状态区域 -->
<div class="off">
<!-- 状态图区 -->
<div id="offLeft" class="left"></div>
<!-- 动态数据区 -->
<div class="right">
<p>
<label>运行次数:</label>
<span id="offCount">0</span>
</p>
<p>
<label>开始时间:</label>
<span id="offStartTime">-</span>
</p>
<p>
<label>结束时间:</label>
<span id="offEndTime">-</span>
</p>
<p>
<label>开始-结束时长:</label>
<span id="offTimeSlot">0</span>
</p>
</div>
<h3>关</h3>
</div>
<div class="bottom">
<h5 class="con-state"></h5>
<h5 class="local-time"></h5>
</div>
</div>
<script>
// let date;
let hEle2 = document.querySelector('.local-time')
// 开
let onLeftEle = document.getElementById('onLeft')
let onCountEle = onCount.innerText
let onStartTimeEle = onStartTime.innerText
let onEndTimeEle = onEndTime.innerText
let onTimeSlotEle = onTimeSlot.innerText
// 关
let offLeftEle = document.getElementById('offLeft')
let offCountEle = offCount.innerText
let offStartTimeEle = offStartTime.innerText
let offEndTimeEle = offEndTime.innerText
let offTimeSlotEle = offTimeSlot.innerText
// 门开运行时间
let ontime = 0
// 门关运行时间
let offtime = 0
// 动态获取本地时间
function localTime() {
setInterval(() => {
let date = new Date()
hEle2.innerText = date
console.log(hEle2.innerText)
}, 1000)
}
localTime()
// 初始状态
function init() {
// 门关,亮红色
offLeftEle.style.backgroundColor = 'red'
// 门开运行次数
onCountEle = 0
// 门关运行次数
offCountEle = 0
// 门关
let date = new Date()
offEndTimeEle = date.toLocaleTimeString()
offEndTime.innerText = offEndTimeEle
}
init()
// 门开 第一时间
function onstart() {
setTimeout(() => {
onCountEle = onCountEle + 1
onCount.innerText = onCountEle
// 红色退出
offLeftEle.style.backgroundColor = ''
// 亮绿色
onLeftEle.style.backgroundColor = 'green'
// 门开动作开始时间
let date = new Date()
onStartTimeEle = date.toLocaleTimeString()
onStartTime.innerText = onStartTimeEle
// 获取时间戳
ontime = Date.parse(date)
}, 1000 * 5) // 5秒后门开 启动
}
onstart()
// 门全开 时间
function onend() {
// +5秒后 门完全打开
setTimeout(() => {
let date = new Date()
onEndTimeEle = date.toLocaleTimeString()
onEndTime.innerText = onEndTimeEle
// 运行时长
onTimeSlotEle = (Date.parse(date) - ontime) / 1000
onTimeSlot.innerText = '' + onTimeSlotEle + 's'
}, 1000 * 10)
}
onend()
// 门关 第一时间
function offstart() {
setTimeout(() => {
offCountEle = offCountEle + 1
offCount.innerText = offCountEle
// 绿色退出
onLeftEle.style.backgroundColor = ''
// 亮红色
offLeftEle.style.backgroundColor = 'red'
// 门关动作开始时间
let date = new Date()
offStartTimeEle = date.toLocaleTimeString()
offStartTime.innerText = offStartTimeEle
// 获取时间戳
offtime = Date.parse(date)
}, 1000 * 20) // 5秒后门关 启动
}
offstart()
// 门全关 时间
function offend() {
// +5秒后 门完全关闭
setTimeout(() => {
let date = new Date()
offEndTimeEle = date.toLocaleTimeString()
offEndTime.innerText = offEndTimeEle
offTimeSlotEle = (Date.parse(date) - offtime) / 1000
offTimeSlot.innerText = '' + offTimeSlotEle + 's'
}, 1000 * 25)
}
offend()
// 每隔一段时间循环门开/关
// 电梯在楼层间上/下运行状态(门是完全关闭的)
function forOnAndOff() {
setInterval(() => {
onstart()
onend()
offstart()
offend()
}, 1000 * 30)
}
forOnAndOff()
</script>
</body>
</html>