ch-校园卡
/
vehicle_js


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车辆显示大屏</title>

<style>
    .hello{
  width: 1920px;
  height: 1080px;
  position: absolute;
  background-size: 100% 100%;
  background-color: #132949;
}
.title{
  display: flex;
  margin-left: 415px;
  color: aliceblue;
  font-size: 58px;
  line-height: 59px;
  /* font-style: italic; */
  font-weight: 600;
  text-align: center;
  margin-top: 76px;
}
.title_line{
  margin-left: 82px;
  width: 3px;
  height: 56px;
  background: #FFFFFF;
  opacity: 0.5;
  border-radius: 2px;
}

.scroll {
 width: 1003px;
 height: 59px;
 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(1003px); /*div多宽就写多宽*/
 }

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

/* 天气 */
.tianqi{
  width: 1270px;
  margin-top: 73px;
  color: aliceblue;
  text-align: center;
  font-size: 24px;
  font-weight: 200;
}
.tianqi_list{
  margin-left: 0px;
}
/* 车辆列表信息 */
.car_list{
  width: 1520px;
  height: 700px;
  float: right;
  margin-top: 31px;
  text-align: left;
}
.car_item{
  margin-top: 24px;
  display: flex;
  line-height: 71px;
}
.car_card_bg{
  display: inline-block;
  z-index: 0;
  width: 60px;
  height: 71px;
  background-size: 100% 100%;
  border-radius: 8px;
  background-color:rgba(254, 253, 253, 0.1);
}
.car_card_txt{
  z-index: 2;
  width: 50px;
  height: 60px;
  position: absolute;
  text-align: center;
  margin-left: -55px;
  font-size: 51px;
  font-family: Microsoft YaHei-3970(82674968);
  font-weight: 400;
  color: white;
}
.car_line{
  margin-left: 30px;
  margin-top: 34px;
  width: 392px;
  height: 2px;
  border-bottom-style: dashed;
  border-bottom-color:rgba(255, 255, 255, 0.2) ;
}
.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;
}
/* 结尾 */
.last{
  width: 1340px;
  float: right;
  margin-top: 51px;
  color: aliceblue;
  text-align: left;
  font-size: 24px;
  font-weight: 200;
}
</style>
</head>


<body>
<div class="hello">
  <div class="title">
      <img src="./image/gonggao.svg" width="58px" height="58px" style="position: absolute;">
      <div class="title_line"></div>
      <div style="margin-left:36px;" class="scroll">
      <span class="scroll_span1" id="scroll_span1"></span>
      <span class="scroll_span2" id="scroll_span2"></span>
      </div>
      <!-- width: 1003px; -->
  </div>
  <!-- 天气 -->
  <div class="tianqi">
    <span id="tianqi_list"></span>
    <span class="tianqi_list" id="weather"></span>
    <span class="tianqi_list" id="tianqi_list3"></span>
    <span class="tianqi_list" id="wendu">℃</span>
  </div>
  <!-- 车辆列表信息 -->
  <div class="car_list" id="car_list">
    <div class="car_item">
      <span class="car_card">
        <div class="car_card_bg"></div>
        <span class="car_card_txt" id="car_card_txt1"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt2"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt3"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt4"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt5"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt6"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt7"></span>
      </span>
      <span class="car_line">
        <span class="xuxian"></span>
      </span>
      <!-- :class="{'green': car_list[0].car_type == '包月车', 'blue': car_list[0].car_type == '预约车', 'white': car_list[0].car_type == '免费车', 'VIP': car_list[0].car_type == 'VIP车'}" -->
      <span class="car_type" id="car_type1" ></span>
    </div>
    <div class="car_item">
      <span class="car_card">
        <div class="car_card_bg"></div>
        <span class="car_card_txt" id="car_card_txt21"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt22"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt23"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt24"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt25"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt26"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt27"></span>
      </span>
      <span class="car_line">
        <span class="xuxian"></span>
      </span>
      <span class="car_type" id="car_type2"></span>
    </div>
    <div class="car_item">
      <span class="car_card">
        <div class="car_card_bg"></div>
        <span class="car_card_txt" id="car_card_txt31"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt32"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt33"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt34"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt35"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt36"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt37"></span>
      </span>
      <span class="car_line">
        <span class="xuxian"></span>
      </span>
      <span class="car_type" id="car_type3"></span>
    </div>
    <div class="car_item">
      <span class="car_card">
        <div class="car_card_bg"></div>
        <span class="car_card_txt" id="car_card_txt41"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt42"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt43"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt44"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt45"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt46"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt47"></span>
      </span>
      <span class="car_line">
        <span class="xuxian"></span>
      </span>
      <span class="car_type" id="car_type4"></span>
    </div>
    <div class="car_item">
      <span class="car_card">
        <div class="car_card_bg"></div>
        <span class="car_card_txt" id="car_card_txt51"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt52"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt53"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt54"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt55"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt56"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt57"></span>
      </span>
      <span class="car_line">
        <span class="xuxian"></span>
      </span>
      <span class="car_type" id="car_type5"></span>
    </div>
    <div class="car_item">
      <span class="car_card">
        <div class="car_card_bg"></div>
        <span class="car_card_txt" id="car_card_txt61"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt62"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt63"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt64"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt65"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt66"></span>
        <div class="car_card_bg" style="margin-left: 15px;"></div>
        <span class="car_card_txt" id="car_card_txt67"></span>
      </span>
      <span class="car_line">
        <span class="xuxian"></span>
      </span>
      <span class="car_type" id="car_type6"></span>
    </div>
  </div>
  <!-- 页尾 -->
  <div class="last">今日累计<span class="green" id="green"></span>辆车</div>
</div>

  <script src="./js/jquery.min.js"></script>
  <script type="text/javascript">
    // 当前时间
    var checkTime = function (i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }
    var nowdate = new Date();
    var year = nowdate.getFullYear(),
        month = nowdate.getMonth() + 1,
        date = nowdate.getDate(),
        day = nowdate.getDay(),
        week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
        h = nowdate.getHours(),
        m = nowdate.getMinutes(),
        s = nowdate.getSeconds(),
        h = checkTime(h),
        m = checkTime(m),
        s = checkTime(s);
    var riqi=year + "-" + month + "-" + date +"  "+week[day];
    var time=h +":" + m + ":" + s;

    var riqi1=document.getElementById("tianqi_list");
    riqi1.innerText=riqi;
    var weekDay1=document.getElementById("tianqi_list3");
    weekDay1.innerText=time;

    setInterval (function() {
        console.log(riqi)
        var riqi1=document.getElementById("tianqi_list");
        riqi1.innerText=riqi;
    }, 240000);  //反复执行函数
    setInterval (function() {
        var weekDay1=document.getElementById("tianqi_list3");
        weekDay1.innerText=time;
    }, 3000);  //反复执行函数

    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.forecasts[0]
            if(result.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('接口出错')
          }
    });
    setInterval (function() {
      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.forecasts[0]
            if(result.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('接口出错')
          }
      });
    }, 43200000);
    // $(function() {
    //     for(i=0; i<16; i++) {
    //         $('<div class="inner">blah</div>').appendTo('.outer');
    //     }
    // });
    var socket;
    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else{
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
        socket = new WebSocket("http://172.16.20.76:8080/websocket/543edaa433ee4d94813fd0ec7527f3ea".replace("http","ws"));
        //打开事件
        socket.onopen = function() {
            console.log("Socket 已打开");
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        socket.onmessage = function(msg) {
            console.log("服务端链接成功，返回信息"+msg.data)
            var data=msg.data.replace(/=/g,':')
            console.log(eval("("+data+")"))
            var picNumber=''
            picNumber=eval("("+data+")").picNumber
            document.getElementById("green").innerHTML=picNumber;
            var title=''
            title=eval("("+data+")").direction
            console.log(title)
            console.log(title.length)
            if(eval("("+data+")").direction.length>17){
              document.getElementById("scroll_span1").innerHTML=eval("("+data+")").direction;
            }else if(eval("("+data+")").direction.length<=17) {
              document.getElementById("scroll_span2").innerHTML=eval("("+data+")").direction;
            }
            
            var car_list=[
                  {id:1,car_card:'',car_type:''},
                  {id:2,car_card:'',car_type:''},
                  {id:3,car_card:'',car_type:''},
                  {id:4,car_card:'',car_type:''},
                  {id:5,car_card:'',car_type:''},
                  {id:6,car_card:'',car_type:''},
                ];
            var arr =[]
            var carNumber =[]
            carNumber.push(eval("("+data+")").carPlate)
            arr=carNumber
            
            var arr_type =[]
            var carType =[]
            carType.push(eval("("+data+")").vehicleType)
            arr_type=carType
            // console.log('车类型数组：',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]
            }else{
              car_list[0].car_card=arr[0]
              car_list[1].car_card=arr[1]
              car_list[2].car_card=arr[2]
              car_list[3].car_card=arr[3]
              car_list[4].car_card=arr[4]
              car_list[5].car_card=arr[5]
            }
            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]
            }else{
              car_list[0].car_type=arr_type[0]
              car_list[1].car_type=arr_type[1]
              car_list[2].car_type=arr_type[2]
              car_list[3].car_type=arr_type[3]
              car_list[4].car_type=arr_type[4]
              car_list[5].car_type=arr_type[5]
            }

              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_type1").innerHTML = car_list[0].car_type;
              if(car_list[0].car_type=='包月车') {
                document.getElementById("car_type1").style.color='#29e122'
              } else if(car_list[0].car_type=='预约车') {
                document.getElementById("car_type1").style.color='#3388f9'
              }else if(car_list[0].car_type=='免费车') {
                document.getElementById("car_type1").style.color='#FFFFFF'
              }else if(car_list[0].car_type=='VIP车') {
                document.getElementById("car_type1").style.color='#2BFFDF'
              }

              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_type2").innerHTML = car_list[1].car_type;
              if(car_list[1].car_type=='包月车') {
                document.getElementById("car_type1").style.color='#29e122'
              } else if(car_list[1].car_type=='预约车') {
                document.getElementById("car_type1").style.color='#3388f9'
              }else if(car_list[1].car_type=='免费车') {
                document.getElementById("car_type1").style.color='#FFFFFF'
              }else if(car_list[1].car_type=='VIP车') {
                document.getElementById("car_type1").style.color='#2BFFDF'
              }

              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_type3").innerHTML = car_list[2].car_type;
              if(car_list[2].car_type=='包月车') {
                document.getElementById("car_type1").style.color='#29e122'
              } else if(car_list[2].car_type=='预约车') {
                document.getElementById("car_type1").style.color='#3388f9'
              }else if(car_list[2].car_type=='免费车') {
                document.getElementById("car_type1").style.color='#FFFFFF'
              }else if(car_list[2].car_type=='VIP车') {
                document.getElementById("car_type1").style.color='#2BFFDF'
              }

              document.getElementById("car_card_txt41").innerHTML = (car_list[3].car_card).slice(0,1);
              document.getElementById("car_card_txt42").innerHTML = (car_list[3].car_card).slice(1,2);
              document.getElementById("car_card_txt43").innerHTML = (car_list[3].car_card).slice(2,3);
              document.getElementById("car_card_txt44").innerHTML = (car_list[3].car_card).slice(3,4);
              document.getElementById("car_card_txt45").innerHTML = (car_list[3].car_card).slice(4,5);
              document.getElementById("car_card_txt46").innerHTML = (car_list[3].car_card).slice(5,6);
              document.getElementById("car_card_txt47").innerHTML = (car_list[3].car_card).slice(6,7);
              document.getElementById("car_type4").innerHTML = car_list[3].car_type;
              if(car_list[3].car_type=='包月车') {
                document.getElementById("car_type1").style.color='#29e122'
              } else if(car_list[3].car_type=='预约车') {
                document.getElementById("car_type1").style.color='#3388f9'
              }else if(car_list[3].car_type=='免费车') {
                document.getElementById("car_type1").style.color='#FFFFFF'
              }else if(car_list[3].car_type=='VIP车') {
                document.getElementById("car_type1").style.color='#2BFFDF'
              }

              document.getElementById("car_card_txt51").innerHTML = (car_list[4].car_card).slice(0,1);
              document.getElementById("car_card_txt52").innerHTML = (car_list[4].car_card).slice(1,2);
              document.getElementById("car_card_txt53").innerHTML = (car_list[4].car_card).slice(2,3);
              document.getElementById("car_card_txt54").innerHTML = (car_list[4].car_card).slice(3,4);
              document.getElementById("car_card_txt55").innerHTML = (car_list[4].car_card).slice(4,5);
              document.getElementById("car_card_txt56").innerHTML = (car_list[4].car_card).slice(5,6);
              document.getElementById("car_card_txt57").innerHTML = (car_list[4].car_card).slice(6,7);
              document.getElementById("car_type5").innerHTML = car_list[4].car_type;
              if(car_list[4].car_type=='包月车') {
                document.getElementById("car_type1").style.color='#29e122'
              } else if(car_list[4].car_type=='预约车') {
                document.getElementById("car_type1").style.color='#3388f9'
              }else if(car_list[4].car_type=='免费车') {
                document.getElementById("car_type1").style.color='#FFFFFF'
              }else if(car_list[4].car_type=='VIP车') {
                document.getElementById("car_type1").style.color='#2BFFDF'
              }

              document.getElementById("car_card_txt61").innerHTML = (car_list[5].car_card).slice(0,1);
              document.getElementById("car_card_txt62").innerHTML = (car_list[5].car_card).slice(1,2);
              document.getElementById("car_card_txt63").innerHTML = (car_list[5].car_card).slice(2,3);
              document.getElementById("car_card_txt64").innerHTML = (car_list[5].car_card).slice(3,4);
              document.getElementById("car_card_txt65").innerHTML = (car_list[5].car_card).slice(4,5);
              document.getElementById("car_card_txt66").innerHTML = (car_list[5].car_card).slice(5,6);
              document.getElementById("car_card_txt67").innerHTML = (car_list[5].car_card).slice(6,7);
              document.getElementById("car_type6").innerHTML = car_list[5].car_type;
              if(car_list[5].car_type=='包月车') {
                document.getElementById("car_type1").style.color='#29e122'
              } else if(car_list[5].car_type=='预约车') {
                document.getElementById("car_type1").style.color='#3388f9'
              }else if(car_list[5].car_type=='免费车') {
                document.getElementById("car_type1").style.color='#FFFFFF'
              }else if(car_list[5].car_type=='VIP车') {
                document.getElementById("car_type1").style.color='#2BFFDF'
              }
        };
        //关闭事件
        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>