前端电梯BI实时看板--电梯门开关状态

最新推荐文章于 2022-09-15 16:24:10 发布

天码行空

最新推荐文章于 2022-09-15 16:24:10 发布

阅读量682

点赞数 1

分类专栏：前端文章标签： javascript html

本文链接：https://blog.csdn.net/Ksy007/article/details/108277536

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

前端电梯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>

天码行空

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端电梯BI实时看板--电梯门开关状态

电梯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> <lin
复制链接

扫一扫