LiuTeng
/
xagx-zhp-ws-lx


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633
							<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link
      rel="shortcut icon"
      href="https://www.baidu.com/favicon.ico"
      type="image/x-icon"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>排队叫号综合屏</title>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <img src="./landscape/logo.png" />
        <span id="title"></span><span>—叫号信息综合显示屏</span>
      </div>
      <div class="content">
        <div class="con_left">
          <div class="list_box" id="first"></div>
          <div class="list_box" id="second"></div>
          <div class="lists_box" id="lists"></div>
        </div>
        <div class="con_right">
          <div class="con_right_title">扫码关注看排队省时省力又省心</div>
          <div class="con_right_code">
            <img src="./img/gzhCode.jpg" />
          </div>
        </div>
      </div>
      <div class="foolter">
        <div class="fool_left">
          <div class="time"><span id="time"></span></div>
        </div>
        <div class="fool_center">请留意叫号信息，过号请重新排队</div>
        <div class="fool_right" id="logo_text"></div>
      </div>
    </div>
    <div class="alert" id="alert"></div>
  </body>
</html>

<script>
  // 定义全局变量
  var url = window.location.search.slice(1).split("&");
  var dpi = 1920;
  if (url[2]) {
    dpi = url[2].slice(url[2].lastIndexOf("=") + 1);
  }
  var params = {
    zhpname: url[0].slice(url[0].lastIndexOf("=") + 1),
    sljgdm: url[1].slice(url[1].lastIndexOf("=") + 1),
  };
  // 接口地址
  var initUrl = "https://pdjh.shizhi.tv/machine/init/old/zhp";
  var pollingUrl = "https://pdjh.shizhi.tv/machine/init/old/split/getRedis";
  // dom 数据
  var firstData = new Object();
  var secondData = new Object();
  var codeList = new Array();
  // 闪烁延时器
  var flashTimer = null;
  // 闪烁定时器
  var flashingTimer = null;
</script>

<script>
  // 定义全局方法
  // 获取元素
  function $(id) {
    return document.getElementById(id);
  }
  // 创建元素
  function $create(ele) {
    return document.createElement(ele);
  }
</script>

<script>
  // 综合屏初始化信息
  function getInitData() {
    var xhr = new XMLHttpRequest();
    xhr.open("post", initUrl);
    xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");
    var form = JSON.stringify({
      userType: "综合屏",
      machineName: params.zhpname,
      sljgdm: params.sljgdm,
    });
    xhr.send(form);

    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status === 200) {
        var respose = JSON.parse(xhr.responseText) || {};
        if (respose.bsfwtmc) {
          // 处理响应结果
          initFormatter(respose);
          setTimeout(function () {
            getPolling();
          }, 800);
        } else {
          myAlert(respose.msg || "参数错误", 3000);
          setTimeout(function () {
            getInitData();
          }, 3000);
        }
      } else if (xhr.readyState == 4) {
        setTimeout(function () {
          getInitData();
        }, 800);
      }
    };
  }

  // 综合屏轮询信息
  function getPolling() {
    var xhr = new XMLHttpRequest();
    xhr.open("get", pollingUrl + "?machineName=" + params.zhpname);
    xhr.send();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status === 200) {
        var respose = JSON.parse(xhr.responseText) || {};
        // 处理响应结果
        pollingFormatter(respose);
        setTimeout(function () {
          getPolling();
        }, 800);
      } else if (xhr.readyState == 4) {
        setTimeout(function () {
          getPolling();
        }, 800);
      }
    };
  }
</script>

<script>
  // 设置屏幕缩放比例
  function setScreenSize() {
    var page = document.body;
    page.style.zoom = dpi / 1920;
  }
  // 弹框
  function myAlert(msg, dur) {
    var alert = $("alert");
    alert.style.display = "block";
    alert.innerHTML = msg;
    setTimeout(function () {
      alert.style.display = "none";
    }, dur);
  }
  // 获取时间
  function getTime() {
    var date = new Date();
    var h = date.getHours();
    var m = date.getMinutes();
    if (h < 10) {
      h = "0" + h;
    }
    if (m < 10) {
      m = "0" + m;
    }
    var time = h + ":" + m;
    $("time").innerHTML = time;
    setTimeout(function () {
      getTime();
    }, 1000);
  }
  // 处理初始化数据
  function initFormatter(data) {
    $("title").innerHTML = data.bsfwtjc;
    $("logo_text").innerHTML = data.dttsy;
    if (data.top) {
      firstData = data.top;
    }
    if (data.historyList) {
      for (var i = 0; i < data.historyList.length; i++) {
        var list = data.historyList[i];
        if (i == 0) {
          secondData = list;
        } else {
          codeList.push(list);
        }
      }
    }
    rendering();
  }

  // 处理轮询数据
  function pollingFormatter(data) {
    if (data.code == 0) {
      var listData = JSON.parse(data.msg);
      if (listData.zhpInit && listData.zhpInit.top) {
        codeList.unshift(secondData);
        if (codeList.length > 15) {
          codeList.pop();
        }
        secondData = firstData;
        firstData = listData.zhpInit.top;
        rendering();
      }
    }
  }

  // 创建元素
  function buildElemet() {
    // list
    var list = $create("div");
    list.className = "list";
    // label1
    var label1 = $create("div");
    label1.className = "label1";
    var label1_span = $create("span");
    label1_span.innerHTML = "请";
    label1.appendChild(label1_span);
    // label2
    var label2 = $create("div");
    label2.className = "label2";
    var label2_span = $create("span");
    var label2_div = $create("div");
    label2_div.className = "yy";
    // label3
    var label3 = $create("div");
    label3.className = "label3";
    var label3_span = $create("span");
    label3_span.innerHTML = "到";
    label3.appendChild(label3_span);
    // label4
    var label4 = $create("div");
    label4.className = "label4";
    var label4_span = $create("span");
    // label5
    var label5 = $create("div");
    label5.className = "label5";
    var label5_span = $create("span");
    label5_span.innerHTML = "窗口办理业务";
    label5.appendChild(label5_span);
    return {
      list: list,
      label1: label1,
      label1_span: label1_span,
      label2: label2,
      label2_span: label2_span,
      label2_div: label2_div,
      label3: label3,
      label3_span: label3_span,
      label4: label4,
      label4_span: label4_span,
      label5: label5,
      label5_span: label5_span,
    };
  }

  // 组合dom
  function margeDom(data) {
    if (data.phhm) {
      var elements = buildElemet();
      elements.label2_span.innerHTML = data.phhm + "号";
      elements.label2.appendChild(elements.label2_span);
      if (data.phhm.toString()[0] == "Y") {
        elements.label2_div.innerHTML = "预约";
        elements.label2.appendChild(elements.label2_div);
      } else if (data.phhm.toString()[0] == "L") {
        elements.label2_div.innerHTML = "绿通";
        elements.label2.appendChild(elements.label2_div);
      }
      elements.label4_span.innerHTML = data.ckhm;
      elements.label4.appendChild(elements.label4_span);
      elements.list.appendChild(elements.label1);
      elements.list.appendChild(elements.label2);
      elements.list.appendChild(elements.label3);
      elements.list.appendChild(elements.label4);
      elements.list.appendChild(elements.label5);
      return elements.list;
    } else {
      return null;
    }
  }

  // 渲染dom
  function rendering() {
    var firstParent = $("first");
    firstParent.innerHTML = "";
    var firstEle = margeDom(firstData);
    if (firstEle) {
      firstParent.appendChild(firstEle);
    }
    var secondParent = $("second");
    secondParent.innerHTML = "";
    var secondEle = margeDom(secondData);
    if (secondEle) {
      secondParent.appendChild(secondEle);
    }
    var listEle = $("lists");
    listEle.innerHTML = "";
    for (var i = 0; i < codeList.length; i++) {
      var listData = codeList[i];
      var list_box = $create("div");
      list_box.className = "list_box";
      var listBoxEle = margeDom(listData);
      if (listBoxEle) {
        list_box.appendChild(listBoxEle);
      }
      listEle.appendChild(list_box);
    }
    startFlashing();
  }
  // 闪烁动画
  function startFlashing() {
    var firstEle = $("first");
    firstEle.classList.remove("flashing");
    clearTimeout(flashTimer);
    flashTimer = null;
    clearInterval(flashingTimer);
    flashingTimer = null;
    // 定时修改样式
    var staring = false;
    flashingTimer = setInterval(function () {
      if (staring) {
        firstEle.classList.remove("flashing");
      } else {
        firstEle.classList.add("flashing");
      }
      staring = !staring;
    }, 500);
    // 延时清除定时器等
    flashTimer = setTimeout(function () {
      clearInterval(flashingTimer);
      flashingTimer = null;
      clearTimeout(flashTimer);
      flashTimer = null;
      firstEle.classList.remove("flashing");
    }, 5000);
  }
</script>

<script>
  // 获取数据
  getInitData();
  // 获取时间
  getTime();
  setScreenSize();
</script>

<style>
  @font-face {
    font-family: "苹方简M";
    src: url("./PFM.OTF");
  }
  html,
  body {
    padding: 0;
    margin: 0;
    font-family: "苹方简M";
  }

  .container {
    width: 1920px;
    height: 1080px;
    background-image: url("./landscape/bg.png");
  }

  .header {
    width: 100%;
    height: 120px;
    line-height: 120px;
    text-align: center;
    font-size: 60px;
    color: #ffffff;
  }

  .header > img {
    position: relative;
    top: 7px;
    height: 60px;
  }

  .content {
    width: 100%;
    height: 850px;
    overflow: hidden;
  }

  .con_left,
  .con_right {
    float: left;
    overflow: hidden;
  }

  .con_left {
    margin-left: 30px;
    padding: 20px;
    width: 1460px;
    height: 100%;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 3px 10px 1px #005273;
    box-sizing: border-box;
  }

  .lists_box {
    width: 100%;
    height: 486px;
  }

  .list_box {
    width: 100%;
    height: 160px;
    border-bottom: 2px dashed #938484;
  }

  .list {
    width: 100%;
    height: 160px;
    line-height: 160px;
    background: #ff5c21;
    transition: all 0.35s;
  }

  #first .list {
    border-radius: 20px 20px 0 0;
  }

  .flashing .list {
    background: #ffffff;
  }

  .lists_box .list {
    background: #ffffff;
  }

  .label1,
  .label2,
  .label3,
  .label4,
  .label5 {
    float: left;
  }

  .label1 {
    margin-left: 20px;
    width: 80px;
    font-size: 70px;
    color: #0067e4;
  }

  .label2 {
    padding-left: 20px;
    position: relative;
    width: 500px;
    text-align: left;
    font-size: 100px;
    color: #ffffff;
    font-weight: bold;
    letter-spacing: 5px;
    box-sizing: border-box;
  }

  .lists_box .label2 {
    color: #0067e4;
  }

  .flashing .label2,
  .flashing .label4 {
    color: #ff5c21;
  }

  .yy {
    padding: 15px 0;
    position: absolute;
    top: 30px;
    right: 0;
    width: 40px;
    height: 100px;
    border-radius: 20px;
    font-size: 25px;
    line-height: 35px;
    text-align: center;
    color: #ffffff;
    background: #22cc4d;
    box-sizing: border-box;
    font-weight: normal;
    letter-spacing: 0;
  }

  .lists_box .yy {
    color: #ffffff;
    background: #ff5500;
  }

  .label3 {
    width: 100px;
    text-align: center;
    font-size: 70px;
    color: #0067e4;
  }

  .label4 {
    width: 220px;
    text-align: center;
    font-size: 100px;
    color: #ffffff;
    font-weight: bold;
    letter-spacing: 5px;
  }

  .lists_box .label4 {
    color: #0067e4;
  }

  .label5 {
    width: 500px;
    text-align: center;
    font-size: 70px;
    color: #0067e4;
  }

  .con_right {
    margin-left: 15px;
    width: 400px;
    height: 100%;
  }

  .con_right_title {
    padding: 95px 0;
    width: 100%;
    height: 350px;
    line-height: 80px;
    color: #ffffff;
    letter-spacing: 1px;
    font-size: 55px;
    text-align: center;
    box-sizing: border-box;
  }

  .con_right_code {
    position: relative;
    width: 100%;
    height: 500px;
    background-image: url(./landscape/phones.png);
    background-size: 380px auto;
    background-repeat: no-repeat;
    background-position: center top;
  }

  .con_right_code > img {
    position: absolute;
    top: 110px;
    left: 89px;
    width: 225px;
    border-radius: 10px;
  }

  .foolter {
    width: 100%;
    height: 110px;
    background: #ffffff;
  }

  .fool_left,
  .fool_center,
  .fool_right {
    float: left;
    height: 110px;
  }

  .fool_left,
  .fool_right {
    width: 600px;
  }

  .time {
    width: 300px;
    height: 110px;
    line-height: 110px;
    background: #169dff;
    border-radius: 0px 62px 62px 0px;
    font-size: 60px;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    letter-spacing: 2px;
  }

  .fool_center {
    width: 720px;
    line-height: 110px;
    text-align: center;
    font-size: 40px;
    font-weight: 400;
    color: #000000;
  }

  .fool_right {
    padding-right: 45px;
    line-height: 110px;
    text-align: right;
    font-size: 40px;
    font-weight: 400;
    color: #016cb3;
    letter-spacing: 2px;
    box-sizing: border-box;
  }

  .alert {
    display: none;
    padding: 0 20px;
    position: fixed;
    top: 20px;
    left: 460px;
    width: 1000px;
    height: 80px;
    line-height: 80px;
    font-size: 35px;
    color: #e00000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    background: #ffcccc;
    border: 2px solid #e00000;
    border-radius: 10px;
    box-sizing: border-box;
  }
</style>