LiuTeng
/
xagx-tp-ws-lx


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <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="title">
        <div class="title-text" id="title"></div>
      </div>
      <div class="border1"></div>
      <div class="content">
        <div class="con-info">
          <div class="con-info-index" id="index"></div>
          <div class="con-info-name" id="conInfoName"></div>
          <div class="con-info-state" id="conInfoState">
            <div class="con-info-state-icon">
              <img id="icon" src="./image/frees.png" />
            </div>
            <div class="con-info-state-text" id="conStateText"></div>
          </div>
        </div>
        <div class="con-state" id="conState">
          <div class="con-state-icon">
            <img id="icon1" src="./image/frees.png" />
          </div>
          <div class="con-state-text" id="conStateText1">工作中</div>
        </div>
        <div class=""></div>
        <div class="con-now" id="conNowBox">
          正在办理：<span id="conNow"></span>
        </div>
        <div class="con-wait" id="conWaitBox">
          当前等待：<span id="conWait"></span>
        </div>
      </div>
    </div>
  </body>
</html>

<script>
  var wsApiUrl = "wss://pdjh.shizhi.tv/websocket/gw/";
  // *** 接口地址 ***
  var ettpApiUrl = "https://pdjh.shizhi.tv/machine/init/old/ettp";
  // var ettpApiUrl = "http://1.82.219.239:8092/machine/init/old/ettp"
  var stateApiUrl = "https://pdjh.shizhi.tv/machine/init/old/split/getRedis";
  // var stateApiUrl = "http://1.82.219.239:8092/machine/init/old/split/getRedis"

  // *** 参数信息 ***
  var url = window.location.search.slice(1).split("&");
  var tpname = url[0].slice(url[0].lastIndexOf("=") + 1);
  var sljgdm = url[1].slice(url[1].lastIndexOf("=") + 1);

  //  获取数据
  function getDatas() {
    if ("WebSocket" in window) {
      console.log("您的浏览器支持 WebSocket!");
      websocket();
    } else {
      console.log("您的浏览器不支持 WebSocket!");
      getEttpInit();
    }
  }

  // websocket
  function websocket() {
    // ws参数
    var msg = {
      userType: "ET条屏",
      machineName: tpname,
      sljgdm: sljgdm,
    };
    var wsUrl = wsApiUrl + "{" + JSON.stringify(msg) + "}";
    var connection = null;
    // 心跳倒计时
    var heartTimer = null;
    // 重连倒计时
    var reConnectTimer = null;

    function connectWS() {
      connection = new WebSocket(wsUrl);
      // ws 连接成功
      connection.onopen = wsOpen;
      function wsOpen(event) {
        heart();
      }
      connection.onclose = wsClose;
      function wsClose() {
        reConnect();
        console.log("%c" + "连接关闭，正在重连...", "color:" + "#fe4c40");
      }
      // 接收消息
      connection.onmessage = wsMessage;
      function wsMessage(event) {
        var response = JSON.parse(event.data);

        switch (response.code) {
          default:
            return;
          // 初始化
          case "ettpInit":
            updateDom(response.tpxxVO);
            break;
          //取号完成
          case "qhwc":
            for (var i = 0; i < response.tpList.length; i++) {
              if (response.tpList[i].tpbh == tpname) {
                var list = response.tpList[i].tpxxVO;
                updateDom(list);
                break;
              }
            }
            break;
          // 综合完成
          case "zhwc":
            for (var i = 0; i < response.tpList.length; i++) {
              if (response.tpList[i].tpbh == tpname) {
                var list = response.tpList[i].tpxxVO;
                updateDom(list);
                break;
              }
            }
            break;
          // 叫号完成
          case "jhwc":
            for (var i = 0; i < response.tpList.length; i++) {
              if (response.tpList[i].tpbh == tpname) {
                var list = response.tpList[i].tpxxVO;
                updateDom(list);
                break;
              }
            }
            break;
          // 心跳
          case "heart":
            clearTimeout(reConnectTimer);
            heartTimer = setTimeout(function () {
              heart();
            }, 10 * 1000);
            break;
        }
      }
    }

    // 心跳
    function heart() {
      clearTimeout(heartTimer);
      if (connection != null) {
        var heartText = {
          code: "heart",
          text: "这只是一个心跳",
        };
        connection.send(JSON.stringify(heartText));
      }
      reConnectTimer = setTimeout(function () {
        reConnect();
      }, 30 * 1000);
    }

    // 重连
    function reConnect() {
      clearTimeout(reConnectTimer);
      if (connection) {
        connection.close();
        connection = null;
      }
      connection = null;
      reConnectTimer = setTimeout(function () {
        connectWS();
      }, 3 * 1000);
    }
    connectWS();
  }

  // 条屏初始化信息
  function getEttpInit() {
    // *** 创建xhr的对象 ***
    var xhr = new XMLHttpRequest();
    xhr.open("post", ettpApiUrl);
    xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");
    // *** 调用send函数 ***
    var ettpForm = JSON.stringify({
      machineName: tpname,
      sljgdm: sljgdm,
      userType: "ET条屏",
    });
    xhr.send(ettpForm);
    // *** 监听事件 ***
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status === 200) {
        var ettpRes = JSON.parse(xhr.responseText) || {};
        var ettpResInfos = ettpRes.tpxxVO || {};
        //  *** 修改内容 ***
        updateDom(ettpResInfos);
      } else {
      }
    };
    setTimeout(function () {
      getState();
    }, 800);
  }

  // 条屏轮询
  function getState() {
    // *** 创建xhr的对象 ***
    var xhr = new XMLHttpRequest();
    xhr.open("get", stateApiUrl + "?machineName=" + tpname);
    // *** 调用send函数 ***
    xhr.send();
    // *** 监听事件 ***
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status === 200) {
        var screenarr = JSON.parse(xhr.responseText) || {};
        var arr = screenarr.code == "0" ? screenarr.msg : null;
        if (arr != null) {
          var stateRes = JSON.parse(arr).tpxxVO || {};
          //  *** 修改内容 ***
          updateDom(stateRes);
        }
      } else {
      }
    };
    setTimeout(function () {
      getState();
    }, 800);
  }

  // 更新dom
  function updateDom(infos) {
    // 标题
    setEleCon("title", "innerHTML", infos.dttsy || "");
    // 窗口号码
    setEleCon("index", "innerHTML", infos.ckhm || "");
    if (
      (infos.slyw[0] != "征纳互动" || infos.slyw[0] != "电子税务局") &&
      infos.slyw[0] != "综合服务"
    ) {
      setStyle("conInfoState", "display", "");
      setStyle("conState", "display", "none");
      setStyle("conNowBox", "display", "");
      setStyle("conWaitBox", "display", "");
      setStyle("conInfoName", "width", "750px");
      setStyle("conNowBox", "fontSize", "");
      setStyle("conNowBox", "marginLeft", "");
      // 业务名称
      if (infos.slyw) {
        setEleCon("conInfoName", "innerHTML", infos.slyw.join(" "));
        if (infos.slyw.join(" ").length > 5) {
          setStyle("conInfoName", "lineHeight", "150px");
          setStyle("conInfoName", "fontSize", "120px");
        } else {
          setStyle("conInfoName", "lineHeight", "300px");
          setStyle("conInfoName", "fontSize", "150px");
        }
      }
      // 修改图标及状态
      var srcs = {
        kx: "./image/frees.png",
        zt: "./image/wites.png",
        hj: "./image/xlb.png",
      };
      var textColors = {
        kx: "#00FFFF",
        zt: "#FFF700",
        hj: "#00FFFF",
      };
      var ckzt = infos.ckzt || "";
      setEleCon(
        "icon",
        "src",
        ckzt == "空闲" ? srcs.kx : ckzt === "暂停服务" ? srcs.zt : srcs.hj
      );
      setStyle(
        "conStateText",
        "color",
        ckzt === "空闲"
          ? textColors.kx
          : ckzt === "暂停服务"
          ? textColors.zt
          : textColors.kx
      );
      setEleCon("conStateText", "innerHTML", ckzt === "空闲" ? "工作中" : ckzt);
      // 正在办理
      setEleCon(
        "conNow",
        "innerHTML",
        ckzt != "空闲" && ckzt != "暂停服务" ? ckzt : "暂无"
      );
      // 等待人数
      setEleCon(
        "conWait",
        "innerHTML",
        ckzt != "暂停服务" && infos.ddrs != "0"
          ? (infos.ddrs || "0") + "人"
          : "暂无"
      );
    } else {
      setStyle("conInfoState", "display", "none");
      setStyle("conNowBox", "display", "none");
      setStyle("conWaitBox", "display", "none");
      if (infos.slyw[0] === "征纳互动" ||  infos.slyw[0] == "电子税务局") {
        setStyle("conInfoName", "width", "1555px");
        // 业务名称
        if (infos.slyw) {
          setStyle("conState", "display", "block");
          setEleCon("conInfoName", "innerHTML", infos.slyw.join(" "));
          setStyle("conInfoName", "lineHeight", "300px");
          setStyle("conInfoName", "fontSize", "140px");
        }
      } else if (infos.slyw[0] === "综合服务") {
        setStyle("conInfoName", "width", "750px");
        // 业务名称
        if (infos.slyw) {
          setStyle("conState", "display", "none");
          setEleCon("conInfoName", "innerHTML", infos.slyw.join(" "));
          setStyle("conInfoName", "lineHeight", "300px");
          if (infos.slyw.join(" ").length > 5) {
            setStyle("conInfoName", "fontSize", "120px");
          } else {
            setStyle("conInfoName", "fontSize", "150px");
          }
          setStyle("conInfoState", "display", "");
          // 修改图标及状态
          var srcs = {
            kx: "./image/frees.png",
            zt: "./image/wites.png",
            hj: "./image/xlb.png",
          };
          var textColors = {
            kx: "#00FFFF",
            zt: "#FFF700",
            hj: "#00FFFF",
          };
          var ckzt = infos.ckzt || "";
          setEleCon("icon", "src", srcs.zt);
          setStyle("conStateText", "color", textColors.zt);
          setEleCon("conStateText", "innerHTML", "暂停服务");
          setStyle("conNowBox", "display", "");
          setEleCon("conNowBox", "innerHTML", "潮汐窗口");
          setStyle("conNowBox", "fontSize", "180px");
          setStyle("conNowBox", "marginLeft", "110px");
        }
      }
    }
  }

  // 修改元素内容
  function setEleCon(id, label, value) {
    var ele = document.getElementById(id);
    ele[label] = value;
  }

  // 设置样式
  function setStyle(id, label, value) {
    var ele = document.getElementById(id);
    ele.style[label] = value;
  }

  // 获取元素内容
  function getEleCon(id) {
    var ele = document.getElementById(id);
    return ele.innerHTML;
  }

  // 获取数据
  getDatas();
</script>

<style>
  html,
  body {
    margin: 0;
    padding: 0;
  }

  .container {
    width: 1920px;
    height: 1080px;
  }

  .title {
    padding: 20px 0;
    width: 100%;
    height: 100px;
    line-height: 100px;
    font-size: 70px;
    color: #ffffff;
    text-align: center;
    font-weight: 500;
    font-family: PingFang SC, PingFang SC-Medium;
    background-image: url(./image/bar.png);
  }

  .border1 {
    width: 100%;
    height: 10px;
    background: #00ffff;
  }

  .content {
    position: relative;
    width: 100%;
    height: 930px;
    background-image: url(./image/bg.png);
    background-size: 100% 100%;
  }

  .con-info {
    padding-top: 50px;
    width: 100%;
    height: 300px;
  }

  .con-info-index {
    float: left;
    margin: 25px;
    width: 250px;
    height: 250px;
    text-align: center;
    line-height: 250px;
    font-size: 150px;
    font-family: DIN, DIN-Regular;
    color: #ffffff;
    border-radius: 50%;
    background: #ff0000;
  }

  .con-info-name {
    float: left;
    margin-right: 65px;
    width: 750px;
    height: 300px;
    line-height: 300px;
    font-size: 120px;
    color: #ffffff;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
  }

  .con-info-state {
    float: left;
    width: 780px;
    height: 300px;
  }

  .con-info-state-icon {
    float: left;
    padding: 75px 0 55px 0;
    width: 170px;
    height: 170px;
  }

  .con-info-state-icon > img {
    width: 100%;
    height: 100%;
  }

  .con-info-state-text {
    float: left;
    width: 610px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    font-size: 150px;
    font-weight: 400;
  }

  .con-state {
    display: none;
    margin-top: 70px;
    margin-left: 650px;
    width: 1000px;
    height: 300px;
  }

  .con-state-icon {
    float: left;
    padding: 80px 0 60px 0;
    width: 170px;
    height: 170px;
  }

  .con-state-icon > img {
    width: 100%;
    height: 100%;
  }

  .con-state-text {
    margin-left: 10px;
    float: left;
    width: 610px;
    height: 300px;
    line-height: 300px;
    color: #00ffff;
    text-align: left;
    font-size: 165px;
    font-weight: 400;
  }

  .con-now {
    padding-left: 500px;
    margin-top: 120px;
    height: 200px;
    font-size: 130px;
    line-height: 200px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
    font-weight: 400;
    color: #ffffff;
  }

  .con-wait {
    padding-left: 500px;
    margin-top: 40px;
    height: 200px;
    font-size: 130px;
    line-height: 200px;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
    font-weight: 400;
    color: #ffffff;
  }
</style>