ch-校园卡
/
vehicle_js


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>车辆显示大屏</title>
  <link rel="stylesheet" href="./css/border.css">
  <link rel="stylesheet" href="./css/reset.css">

  <style>
    .hello{
      width: 1920px;
      height: 1080px;
      position: absolute;
      background-size: 100% 100%;
      background-color: #132949;
    }
    .title{
      display: flex;
      color: #FEFEFE;
      font-size: 140px;
      font-weight: 400;
      text-align: center;
      height: 270px;
      line-height: 270px;
    }

    .scroll {
      width: 1920px;
      height:270px;
      white-space: nowrap; /*文字不折行*/
      overflow: hidden; /*文字溢出隐藏*/
    }

    .scroll .scroll_span1 {
      display: inline-block;
      white-space: nowrap;
      /*inline样式不能使用动画*/
      animation: scroll 10s linear infinite; /*滚动动画*/
    }

    @keyframes scroll {
      from {
        transform: translateX(1920px); /*div多宽就写多宽*/
      }

      to {
        transform: translateX(-100%);
      }
    }

    /* 车辆列表信息 */
    .car_list{
      width: 1920px;
      height: 810px;
      margin-top: 0;
    }
    .car_item1{
      display: flex;
      font-size: 0;
    }
    .car_item2{
      display: flex;
      font-size: 0;
    }
    .car_item3{
      display: flex;
      font-size: 0;
    }

    .car_card_txt{
      display: inline-block;
      z-index: 2;
      width: 160px;
      /* height: 320px; */
      line-height: 270px;
      text-align: center;
      font-size: 140px;
      font-family: Microsoft YaHei-3970(82674968);
      font-weight: 400;
      color: white;
    }

    .car_type{
      margin-left: 39px;
      color: #f8751f;
      font-size: 40px;
      font-family: Microsoft YaHei;
      font-weight: bold;
    }
    .green{
      color: #29e122;
    }
    .blue{
      color: #3388f9;
    }
    .yellow{
      color: #f8ce35;
    }
    .white{
      color: #FFFFFF;
    }
    .VIP{
      color: #2BFFDF;
    }
  </style>
</head>


<body>
<div class="hello">
  <div class="title">
    <div class="scroll">
      <span class="scroll_span1" id="scroll_span1"></span>
    </div>
    <!-- width: 1003px; -->
  </div>
  <!-- 车辆列表信息 -->
  <div class="car_list" id="car_list">
    <div class="car_item1">
      <span class="car_card">
        <div class="car_card_txt" id="car_card_txt1"></div>
        <div class="car_card_txt" id="car_card_txt2"></div>
        <div class="car_card_txt" id="car_card_txt3"></div>
        <div class="car_card_txt" id="car_card_txt4"></div>
        <div class="car_card_txt" id="car_card_txt5"></div>
        <div class="car_card_txt" id="car_card_txt6"></div>
        <div class="car_card_txt" id="car_card_txt7"></div>
        <div class="car_card_txt" id="car_card_txt8"></div>
        <div class="car_card_txt" id="car_card_txt9"></div>
        <div class="car_card_txt" id="car_card_txt10"></div>
        <div class="car_card_txt" id="car_card_txt11"></div>
        <div class="car_card_txt" id="car_card_txt12"></div>
      </span>
    </div>
    <div class="car_item2">
      <span class="car_card">
        <div class="car_card_txt" id="car_card_txt21"></div>
        <div class="car_card_txt" id="car_card_txt22" ></div>
        <div class="car_card_txt" id="car_card_txt23"></div>
        <div class="car_card_txt" id="car_card_txt24"></div>
        <div class="car_card_txt" id="car_card_txt25"></div>
        <div class="car_card_txt" id="car_card_txt26"></div>
        <div class="car_card_txt" id="car_card_txt27"></div>
        <div class="car_card_txt" id="car_card_txt28"></div>
        <div class="car_card_txt" id="car_card_txt29"></div>
        <div class="car_card_txt" id="car_card_txt210"></div>
        <div class="car_card_txt" id="car_card_txt211"></div>
        <div class="car_card_txt" id="car_card_txt212"></div>
      </span>
    </div>
    <div class="car_item3">
      <span class="car_card">
        <div class="car_card_txt" id="car_card_txt31"></div>
        <div class="car_card_txt" id="car_card_txt32" ></div>
        <div class="car_card_txt" id="car_card_txt33"></div>
        <div class="car_card_txt" id="car_card_txt34"></div>
        <div class="car_card_txt" id="car_card_txt35"></div>
        <div class="car_card_txt" id="car_card_txt36"></div>
        <div class="car_card_txt" id="car_card_txt37"></div>
        <div class="car_card_txt" id="car_card_txt38"></div>
        <div class="car_card_txt" id="car_card_txt39"></div>
        <div class="car_card_txt" id="car_card_txt310"></div>
        <div class="car_card_txt" id="car_card_txt311"></div>
        <div class="car_card_txt" id="car_card_txt312"></div>
      </span>
    </div>


  </div>
</div>

<script src="./js/jquery.min.js"></script>
<script type="text/javascript">

  var socket;
  var all=[]//获取到的所有数据
  var hou=[]//后三项数据
  resultArr = [];//去重后的数组
  var arr=[]
  var carNumber =[]
  var arr_type =[]
  var carType =[]
  var car_list=[
    {id:1,car_card:'',car_type:''},
    {id:2,car_card:'',car_type:''},
    {id:3,car_card:'',car_type:''},
    // {id:7,car_card:'',car_type:''},
    // {id:8,car_card:'',car_type:''},
  ];

  if(typeof(WebSocket) == "undefined") {
    console.log("您的浏览器不支持WebSocket");
  }else{
    console.log("您的浏览器支持WebSocket");
    //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
    //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
    /*var id3=setInterval(function function_name () {
      socket = new WebSocket("http://172.16.20.76:8080/websocket/543edaa433ee4d94813fd0ec7527f3ea".replace("http","ws"));
    },43200000)*/

    var id3=setInterval(function function_name () {
      var url = window.location.href;
      var hour = new Date().getHours();
      var minute = new Date().getMinutes();
      var second = new Date().getSeconds();
      try{
        socket.send('666');
      }catch{
        window.location.href=url;
      }
      
      console.log(123)
      if (hour == '05' && minute == '10' && second == '10'){
        // socket = new WebSocket("http://172.16.20.76:8080/websocket/543edaa433ee4d94813fd0ec7527525p".replace("http","ws"));
        window.location.href=url;
      }
    },1000)
    socket = new WebSocket("http://172.16.20.76:8080/websocket/543edaa433ee4d94813fd0ec7527525p".replace("http","ws"));
    //打开事件
    socket.onopen = function() {
      console.log("Socket 已打开");
      //socket.send("这是来自客户端的消息" + location.href + new Date());
    };

    //获得消息事件
    socket.onmessage = function(msg) {
      console.log("服务端链接成功，返回信息"+msg.data)
      if(msg.data!='666') {
        var data=msg.data.replace(/=/g,':')
        console.log(eval("("+data+")"))
        var title=''
        title=eval("("+data+")").direction
        console.log(title)
        console.log(title.length)
        document.getElementById("scroll_span1").innerHTML=eval("("+data+")").direction;

        all.push(eval("("+data+")"))

        // const map = new Map()
        // resultArr=all.filter(key => !map.has(key.carPlate) && map.set(key.carPlate, 1))//去重
        // console.log("去重后：",resultArr)


        // carNumber.push(eval("("+data+")").carPlate)
        // carType.push(eval("("+data+")").vehicleType)

        // arr=carNumber.reverse()
        arr=all.reverse()

        var obj = window.sessionStorage.getItem('arr');
        if (obj == null){
          arr = all;
          window.sessionStorage.setItem('arr',JSON.stringify(arr));
        } else if(all==null){
          var obj2_ = JSON.parse(obj);
          arr = obj2_;
          window.sessionStorage.setItem('arr',JSON.stringify(arr));
        }else{
          var obj_ = JSON.parse(obj);
          var se = []
          se.push(eval("("+data+")"))
          se.push(...obj_)
          arr = se;
          window.sessionStorage.setItem('arr',JSON.stringify(arr));
        }

        // var obj = window.sessionStorage.getItem('arr');
        // if (obj == null){
        //   arr = carNumber;
        //   window.sessionStorage.setItem('arr',JSON.stringify(arr));
        // } else if(carNumber==null){
        //   var obj2_ = JSON.parse(obj);
        //   arr = obj2_;
        //   window.sessionStorage.setItem('arr',JSON.stringify(arr));
        // }else{
        //   var obj_ = JSON.parse(obj);
        //   var se = []
        //   se.push(eval("("+data+")").carPlate)
        //   se.push(...obj_)
        //   arr = se;
        //   window.sessionStorage.setItem('arr',JSON.stringify(arr));
        // }

        // arr_type=carType.reverse()

        // var obj_type = window.sessionStorage.getItem('arr_type');
        // if (obj_type == null){
        //   arr_type = carType;
        //   window.sessionStorage.setItem('arr_type',JSON.stringify(arr_type));
        // } else if(carType==null){
        //   var obj_type2_ = JSON.parse(obj_type);
        //   arr_type = obj_type2_;
        //   window.sessionStorage.setItem('arr_type',JSON.stringify(arr_type));
        // } else {
        //   var obj_type_ = JSON.parse(obj_type);
        //   var se_type = []
        //   se_type.push(eval("("+data+")").vehicleType)
        //   se_type.push(...obj_type_)
        //   arr_type = se_type;
        //   window.sessionStorage.setItem('arr_type',JSON.stringify(arr_type));
        // }

        // if(arr.length>=6){
        //   car_list[5].car_card=arr[arr.length - 1]
        //   car_list[4].car_card=arr[arr.length - 2]
        //   car_list[3].car_card=arr[arr.length - 3]
        //   car_list[2].car_card=arr[arr.length - 4]
        //   car_list[1].car_card=arr[arr.length - 5]
        //   car_list[0].car_card=arr[arr.length - 6]
        //   // car_list[0].car_card=arr[arr.length - 7]
        // }else{

        // console.log(arr)
        if(arr[1].carPlate!=eval("("+data+")").carPlate){
          arr[0].carPlate=eval("("+data+")").carPlate
          arr[0].vehicleType=eval("("+data+")").vehicleType
        }else{
          arr[0].carPlate=arr[1].carPlate
          arr[1].carPlate=arr[2].carPlate
          arr[2].carPlate=arr[3].carPlate

          arr[0].vehicleType=arr[1].vehicleType
          arr[1].vehicleType=arr[2].vehicleType
          arr[2].vehicleType=arr[3].vehicleType
        }
        // console.log(arr[1].carPlate==eval("("+data+")").carPlate)
        car_list[0].car_card=arr[0].carPlate
        car_list[1].car_card=arr[1].carPlate
        car_list[2].car_card=arr[2].carPlate
        // car_list[6].car_card=arr[6]
        // }
        // if(arr_type.length>=6){
        //   car_list[5].car_type=arr_type[arr_type.length - 1]
        //   car_list[4].car_type=arr_type[arr_type.length - 2]
        //   car_list[3].car_type=arr_type[arr_type.length - 3]
        //   car_list[2].car_type=arr_type[arr_type.length - 4]
        //   car_list[1].car_type=arr_type[arr_type.length - 5]
        //   car_list[0].car_type=arr_type[arr_type.length - 6]
        //   // car_list[0].car_type=arr_type[arr_type.length - 7]
        // }else{
        car_list[0].car_type=arr[0].vehicleType
        car_list[1].car_type=arr[1].vehicleType
        car_list[2].car_type=arr[2].vehicleType
        // car_list[6].car_type=arr_type[6]
        // }

        document.getElementById("car_card_txt1").innerHTML = (car_list[0].car_card).slice(0,1);
        document.getElementById("car_card_txt2").innerHTML = (car_list[0].car_card).slice(1,2);
        document.getElementById("car_card_txt3").innerHTML = (car_list[0].car_card).slice(2,3);
        document.getElementById("car_card_txt4").innerHTML = (car_list[0].car_card).slice(3,4);
        document.getElementById("car_card_txt5").innerHTML = (car_list[0].car_card).slice(4,5);
        document.getElementById("car_card_txt6").innerHTML = (car_list[0].car_card).slice(5,6);
        document.getElementById("car_card_txt7").innerHTML = (car_list[0].car_card).slice(6,7);
        document.getElementById("car_card_txt8").innerHTML = (car_list[0].car_card).slice(7,8);

        document.getElementById("car_card_txt10").innerHTML = (car_list[0].car_type).slice(0,1);
        document.getElementById("car_card_txt11").innerHTML = (car_list[0].car_type).slice(1,2);
        document.getElementById("car_card_txt12").innerHTML = (car_list[0].car_type).slice(2,3);
        if(car_list[0].car_type=='月租车') {
          document.getElementById("car_card_txt10").style.color='#29e122'
          document.getElementById("car_card_txt11").style.color='#29e122'
          document.getElementById("car_card_txt12").style.color='#29e122'
        } else if(car_list[0].car_type=='访客车') {
          document.getElementById("car_card_txt10").style.color='#3388f9'
          document.getElementById("car_card_txt11").style.color='#3388f9'
          document.getElementById("car_card_txt12").style.color='#3388f9'
        }else if(car_list[0].car_type=='免费车') {
          document.getElementById("car_card_txt10").style.color='#FFFFFF'
          document.getElementById("car_card_txt11").style.color='#FFFFFF'
          document.getElementById("car_card_txt12").style.color='#FFFFFF'
        }else if(car_list[0].car_type=='vip') {
          document.getElementById("car_card_txt10").style.color='#2BFFDF'
          document.getElementById("car_card_txt11").style.color='#2BFFDF'
          document.getElementById("car_card_txt12").style.color='#2BFFDF'
        }else if(car_list[0].car_type=='领导车') {
          document.getElementById("car_card_txt10").style.color='#fcff00'
          document.getElementById("car_card_txt11").style.color='#fcff00'
          document.getElementById("car_card_txt12").style.color='#fcff00'
        }else if(car_list[0].car_type=='临时车') {
          document.getElementById("car_card_txt10").style.color='#f8751f'
          document.getElementById("car_card_txt11").style.color='#f8751f'
          document.getElementById("car_card_txt12").style.color='#f8751f'
        }

        document.getElementById("car_card_txt21").innerHTML = (car_list[1].car_card).slice(0,1);
        document.getElementById("car_card_txt22").innerHTML = (car_list[1].car_card).slice(1,2);
        document.getElementById("car_card_txt23").innerHTML = (car_list[1].car_card).slice(2,3);
        document.getElementById("car_card_txt24").innerHTML = (car_list[1].car_card).slice(3,4);
        document.getElementById("car_card_txt25").innerHTML = (car_list[1].car_card).slice(4,5);
        document.getElementById("car_card_txt26").innerHTML = (car_list[1].car_card).slice(5,6);
        document.getElementById("car_card_txt27").innerHTML = (car_list[1].car_card).slice(6,7);
        document.getElementById("car_card_txt28").innerHTML = (car_list[1].car_card).slice(7,8);

        document.getElementById("car_card_txt210").innerHTML = (car_list[1].car_type).slice(0,1);
        document.getElementById("car_card_txt211").innerHTML = (car_list[1].car_type).slice(1,2);
        document.getElementById("car_card_txt212").innerHTML = (car_list[1].car_type).slice(2,3);
        if(car_list[1].car_type=='月租车') {
          document.getElementById("car_card_txt210").style.color ='#29e122'
          document.getElementById("car_card_txt211").style.color ='#29e122'
          document.getElementById("car_card_txt212").style.color ='#29e122'
        } else if(car_list[1].car_type=='访客车') {
          document.getElementById("car_card_txt210").style.color ='#3388f9'
          document.getElementById("car_card_txt211").style.color ='#3388f9'
          document.getElementById("car_card_txt212").style.color ='#3388f9'
        }else if(car_list[1].car_type=='免费车') {
          document.getElementById("car_card_txt210").style.color ='#FFFFFF'
          document.getElementById("car_card_txt211").style.color ='#FFFFFF'
          document.getElementById("car_card_txt212").style.color ='#FFFFFF'
        }else if(car_list[1].car_type=='vip') {
          document.getElementById("car_card_txt210").style.color ='#2BFFDF'
          document.getElementById("car_card_txt211").style.color ='#2BFFDF'
          document.getElementById("car_card_txt212").style.color ='#2BFFDF'
        }else if(car_list[1].car_type=='领导车') {
          document.getElementById("car_card_txt210").style.color ='#fcff00'
          document.getElementById("car_card_txt211").style.color ='#fcff00'
          document.getElementById("car_card_txt212").style.color ='#fcff00'
        }else if(car_list[1].car_type=='临时车') {
          document.getElementById("car_card_txt210").style.color ='#f8751f'
          document.getElementById("car_card_txt211").style.color ='#f8751f'
          document.getElementById("car_card_txt212").style.color ='#f8751f'
        }

        document.getElementById("car_card_txt31").innerHTML = (car_list[2].car_card).slice(0,1);
        document.getElementById("car_card_txt32").innerHTML = (car_list[2].car_card).slice(1,2);
        document.getElementById("car_card_txt33").innerHTML = (car_list[2].car_card).slice(2,3);
        document.getElementById("car_card_txt34").innerHTML = (car_list[2].car_card).slice(3,4);
        document.getElementById("car_card_txt35").innerHTML = (car_list[2].car_card).slice(4,5);
        document.getElementById("car_card_txt36").innerHTML = (car_list[2].car_card).slice(5,6);
        document.getElementById("car_card_txt37").innerHTML = (car_list[2].car_card).slice(6,7);
        document.getElementById("car_card_txt38").innerHTML = (car_list[2].car_card).slice(7,8);

        document.getElementById("car_card_txt310").innerHTML = (car_list[2].car_type).slice(0,1);
        document.getElementById("car_card_txt311").innerHTML = (car_list[2].car_type).slice(1,2);
        document.getElementById("car_card_txt312").innerHTML = (car_list[2].car_type).slice(2,3);
        if(car_list[2].car_type=='月租车') {
          document.getElementById("car_card_txt310").style.color ='#29e122'
          document.getElementById("car_card_txt311").style.color ='#29e122'
          document.getElementById("car_card_txt312").style.color ='#29e122'
        } else if(car_list[2].car_type=='访客车') {
          document.getElementById("car_card_txt310").style.color ='#3388f9'
          document.getElementById("car_card_txt311").style.color ='#3388f9'
          document.getElementById("car_card_txt312").style.color ='#3388f9'
        }else if(car_list[2].car_type=='免费车') {
          document.getElementById("car_card_txt310").style.color ='#FFFFFF'
          document.getElementById("car_card_txt311").style.color ='#FFFFFF'
          document.getElementById("car_card_txt312").style.color ='#FFFFFF'
        }else if(car_list[2].car_type=='vip') {
          document.getElementById("car_card_txt310").style.color ='#2BFFDF'
          document.getElementById("car_card_txt311").style.color ='#2BFFDF'
          document.getElementById("car_card_txt312").style.color ='#2BFFDF'
        }else if(car_list[2].car_type=='领导车') {
          document.getElementById("car_card_txt310").style.color ='#fcff00'
          document.getElementById("car_card_txt311").style.color ='#fcff00'
          document.getElementById("car_card_txt312").style.color ='#fcff00'
        }else if(car_list[2].car_type=='临时车') {
          document.getElementById("car_card_txt310").style.color ='#f8751f'
          document.getElementById("car_card_txt311").style.color ='#f8751f'
          document.getElementById("car_card_txt312").style.color ='#f8751f'
        }
      }


    };

    //监听是否连接成功
    socket.onopen = function () {
      console.log('连接状态：');
    },
            //关闭事件
            socket.onclose = function() {
              console.log("Socket已关闭");
            };
    //发生了错误事件
    socket.onerror = function() {
      alert("Socket发生了错误");
    }
  }
</script>

<script type="text/javascript">
  function tianqi() {
    var url = "https://restapi.amap.com/v3/weather/weatherInfo?key=5411d59a86689ed2053d7e7a224ea1a6&city=360925&extensions=all";
    $.ajax({
      url: url,
      type: 'GET',
      dataType: 'JSON',
      success: function (result) {
        var City = result.data.forecasts[0]
        if(result.data.forecasts[0].reporttime.slice(11,13)<19) {
          document.getElementById("weather").innerHTML = City.casts[0].dayweather
          document.getElementById("wendu").innerHTML = City.casts[0].daytemp
        }else{
          document.getElementById("weather").innerHTML = City.casts[0].dayweather
          document.getElementById("wendu").innerHTML = City.casts[0].daytemp
        }
      },
      error: function (msg) {
        console.log('接口出错')
      }
    });
  }

</script>
</body>
</html>