连上websocket接口

package.json

@@ -8,9 +8,14 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^1.1.3",
     "core-js": "^3.6.5",
+    "socket.io": "^4.5.3",
+    "socket.io-client": "^4.5.3",
     "vue": "^2.6.11",
+    "vue-3-socket.io": "^1.0.5",
     "vue-router": "^3.2.0",
+    "vue-socket.io": "^3.0.10",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

src/App.vue

@@ -5,24 +5,9 @@
 </template>
 
 <style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
+html{
+		// overflow:hidden;
+		width:1920px;
+		height:1080px;
+	}
 </style>

src/assets/style/border.css

@@ -0,0 +1,182 @@
+@charset "utf-8";
+.border,
+.border-top,
+.border-right,
+.border-bottom,
+.border-left,
+.border-topbottom,
+.border-rightleft,
+.border-topleft,
+.border-rightbottom,
+.border-topright,
+.border-bottomleft {
+    position: relative;
+}
+.border::before,
+.border-top::before,
+.border-right::before,
+.border-bottom::before,
+.border-left::before,
+.border-topbottom::before,
+.border-topbottom::after,
+.border-rightleft::before,
+.border-rightleft::after,
+.border-topleft::before,
+.border-topleft::after,
+.border-rightbottom::before,
+.border-rightbottom::after,
+.border-topright::before,
+.border-topright::after,
+.border-bottomleft::before,
+.border-bottomleft::after {
+    content: "\0020";
+    overflow: hidden;
+    position: absolute;
+}
+/* border
+ * 因，边框是由伪元素区域遮盖在父级
+ * 故，子级若有交互，需要对子级设置
+ * 定位 及 z轴
+ */
+.border::before {
+    box-sizing: border-box;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    border: 1px solid #eaeaea;
+    transform-origin: 0 0;
+}
+.border-top::before,
+.border-bottom::before,
+.border-topbottom::before,
+.border-topbottom::after,
+.border-topleft::before,
+.border-rightbottom::after,
+.border-topright::before,
+.border-bottomleft::before {
+    left: 0;
+    width: 100%;
+    height: 1px;
+}
+.border-right::before,
+.border-left::before,
+.border-rightleft::before,
+.border-rightleft::after,
+.border-topleft::after,
+.border-rightbottom::before,
+.border-topright::after,
+.border-bottomleft::after {
+    top: 0;
+    width: 1px;
+    height: 100%;
+}
+.border-top::before,
+.border-topbottom::before,
+.border-topleft::before,
+.border-topright::before {
+    border-top: 1px solid #eaeaea;
+    transform-origin: 0 0;
+}
+.border-right::before,
+.border-rightbottom::before,
+.border-rightleft::before,
+.border-topright::after {
+    border-right: 1px solid #eaeaea;
+    transform-origin: 100% 0;
+}
+.border-bottom::before,
+.border-topbottom::after,
+.border-rightbottom::after,
+.border-bottomleft::before {
+    border-bottom: 1px solid #eaeaea;
+    transform-origin: 0 100%;
+}
+.border-left::before,
+.border-topleft::after,
+.border-rightleft::after,
+.border-bottomleft::after {
+    border-left: 1px solid #eaeaea;
+    transform-origin: 0 0;
+}
+.border-top::before,
+.border-topbottom::before,
+.border-topleft::before,
+.border-topright::before {
+    top: 0;
+}
+.border-right::before,
+.border-rightleft::after,
+.border-rightbottom::before,
+.border-topright::after {
+    right: 0;
+}
+.border-bottom::before,
+.border-topbottom::after,
+.border-rightbottom::after,
+.border-bottomleft::after {
+    bottom: 0;
+}
+.border-left::before,
+.border-rightleft::before,
+.border-topleft::after,
+.border-bottomleft::before {
+    left: 0;
+}
+@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
+    /* 默认值，无需重置 */
+}
+@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
+    .border::before {
+        width: 200%;
+        height: 200%;
+        transform: scale(.5);
+    }
+    .border-top::before,
+    .border-bottom::before,
+    .border-topbottom::before,
+    .border-topbottom::after,
+    .border-topleft::before,
+    .border-rightbottom::after,
+    .border-topright::before,
+    .border-bottomleft::before {
+        transform: scaleY(.5);
+    }
+    .border-right::before,
+    .border-left::before,
+    .border-rightleft::before,
+    .border-rightleft::after,
+    .border-topleft::after,
+    .border-rightbottom::before,
+    .border-topright::after,
+    .border-bottomleft::after {
+        transform: scaleX(.5);
+    }
+}
+@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
+    .border::before {
+        width: 300%;
+        height: 300%;
+        transform: scale(.33333);
+    }
+    .border-top::before,
+    .border-bottom::before,
+    .border-topbottom::before,
+    .border-topbottom::after,
+    .border-topleft::before,
+    .border-rightbottom::after,
+    .border-topright::before,
+    .border-bottomleft::before {
+        transform: scaleY(.33333);
+    }
+    .border-right::before,
+    .border-left::before,
+    .border-rightleft::before,
+    .border-rightleft::after,
+    .border-topleft::after,
+    .border-rightbottom::before,
+    .border-topright::after,
+    .border-bottomleft::after {
+        transform: scaleX(.33333);
+    }
+}

src/assets/style/reset.css

@@ -0,0 +1,25 @@
+@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
+body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
+body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
+h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
+h1,h2,h3,h4,h5,h6{font-family:"微软雅黑",tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
+h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
+address,cite,dfn,em,i,optgroup,var{font-style:normal}
+table{border-collapse:collapse;border-spacing:0;text-align:left}
+caption,th{text-align:inherit}
+ul,ol,menu{list-style:none}
+fieldset,img{border:0}
+img,object,input,textarea,button,select{vertical-align:middle}
+article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
+audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
+blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
+textarea{overflow:auto;resize:vertical}
+input,textarea,button,select,a{outline:0 none;border: none;}
+button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
+mark{background-color:transparent}
+a,ins,s,u,del{text-decoration:none}
+sup,sub{vertical-align:baseline}
+html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
+body {font-family: "Microsoft Yahei", Arial,"Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
+hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
+a {color: #25a4bb;text-decoration: none;}

src/components/HelloWorld.vue

@@ -1,59 +1,449 @@
 <template>
   <div class="hello">
-    <div class="title">{{msg}}</div>
+    <div class="title">
+      <img src="../assets/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>2022-09-13</span>
-      <span class="tianqi_list">星期二</span>
-      <span class="tianqi_list">晴</span>
-      <span class="tianqi_list">14:39:43</span>
-      <span class="tianqi_list">气温：24℃</span>
+      <span>{{now_date}}</span>
+      <span class="tianqi_list">{{week}}</span>
+      <span class="tianqi_list">{{weather}}</span>
+      <span class="tianqi_list">{{Hour}}</span>
+      <span class="tianqi_list">气温：{{high}}℃</span>
     </div>
     <!-- 车辆列表信息 -->
-    <div class="car_list">
-      <div class="car_item" v-for="(item,index) in car_list" :key="index">
+    <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">赣</span>
+          <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">A</span>
+          <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">1</span>
+          <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">2</span>
+          <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">3</span>
+          <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">4</span>
+          <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">5</span>
+          <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" :class="{'green': item.car_type == '包月车', 'blue': item.car_type == '预约车', 'yellow': item.car_type == '免费车'}">{{item.car_type}}</span>
-        <span class="car_warn">{{item.car_warn}}</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">17</span>辆车，当前显示<span class="green">6</span>辆</div>
+    <div class="last">今日累计<span class="green" id="green">{{picNumber}}</span>辆车</div>
   </div>
 </template>
 
+<script src="./js/jquery.min.js"></script>
 <script>
+
+// import socket from "/CH2022/车辆显示屏/vehicle/src/socket/socket";
 export default {
   name: 'HelloWorld',
   data() {
     return {
-      car_list:[
-        {id:1,car_card:'赣A12345',car_type:'临时车',car_warn:'临时车辆不可进入！'},
-        {id:2,car_card:'赣A12345',car_type:'临时车',car_warn:'临时车辆不可进入！'},
-        {id:3,car_card:'赣A12345',car_type:'包月车',car_warn:'9月30到期请续费！'},
-        {id:4,car_card:'赣A12345',car_type:'预约车',car_warn:'时间为9月13-9月20'},
-        {id:5,car_card:'赣A12345',car_type:'包月车',car_warn:'9月20到期请续费！'},
-        {id:6,car_card:'赣A12345',car_type:'免费车',car_warn:''},
-      ],
+      now_date:'',
+      week:'',
+      Hour:'',
+      Miunte:'',
+      Seconds:'',
+      city:'靖安',
+      weather:'',
+      high:'',
+      title:'',
+      picNumber:'',
+    }
+  },
+  created:function(){
+    this.getTianQi()
+    this.timer = setInterval(function() {
+      this.getTianQi()
+    },43200000)
+    this.getNowDate()
+		},
+    
+  
+  mounted(){
+    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+")"))
+            this.picNumber=eval("("+data+")").picNumber
+            document.getElementById("green").innerHTML=this.picNumber;
+            this.title=eval("("+data+")").direction
+            if(this.title.length>17){
+              document.getElementById("scroll_span1").innerHTML=this.title;
+            }else {
+              document.getElementById("scroll_span2").innerHTML=this.title;
+            }
+            
+            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]
+            }
+            // car_list.forEach(e => {
+            //     loveStr += `<div class="car_item" id="car_item">
+            //                 <span class="car_card">
+            //                 <div class="car_card_bg"></div>
+            //                 <span class="car_card_txt">${e.car_card}</span>
+            //                 <div class="car_card_bg" style="margin-left: 15px;"></div>
+            //                 <span class="car_card_txt">${e.car_card}</span>
+            //                 <div class="car_card_bg" style="margin-left: 15px;"></div>
+            //                 <span class="car_card_txt">${e.car_card}</span>
+            //                 <div class="car_card_bg" style="margin-left: 15px;"></div>
+            //                 <span class="car_card_txt">${e.car_card}</span>
+            //                 <div class="car_card_bg" style="margin-left: 15px;"></div>
+            //                 <span class="car_card_txt">${e.car_card}</span>
+            //                 <div class="car_card_bg" style="margin-left: 15px;"></div>
+            //                 <span class="car_card_txt">${e.car_card}</span>
+            //                 <div class="car_card_bg" style="margin-left: 15px;"></div>
+            //                 <span class="car_card_txt">${e.car_card}</span>
+            //               </span>
+            //               <span class="car_line">
+            //                 <span class="xuxian"></span>
+            //               </span>
+            //               <span class="car_type" :class="{'green': item.car_type == '包月车', 'blue': item.car_type == '预约车', 'white': item.car_type == '免费车', 'VIP': item.car_type == 'VIP车'}">{{item.car_type}}</span>
+            //               </div>`;
+            // })
+              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发生了错误");
+            //此时可以尝试刷新页面
+        }
     }
   },
   props: {
     msg: String
+  },
+  methods:{
+    //获取当前时间
+    getNowDate(){
+				var _this = this;
+				this.timer = setInterval(function() {
+				var aData = new Date();
+				// console.log(aData) //Wed Aug 21 2019 10:00:58 GMT+0800 (中国标准时间)
+				// this.value = aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate();
+				var month = aData.getMonth() < 9 ? "0" + (aData.getMonth() + 1) : aData.getMonth() + 1;
+				var date = aData.getDate() <= 9 ? "0" + aData.getDate() : aData.getDate();
+				var Hour = aData.getHours() <=9 ? "0" + (aData.getHours()) : aData.getHours();
+				var Miunte = aData.getMinutes() <= 9 ? "0" + (aData.getMinutes()) : aData.getMinutes();
+				var Seconds = aData.getSeconds() <= 9 ? "0" + (aData.getSeconds()) : aData.getSeconds();
+				var week = "星期" + "日一二三四五六".charAt(aData.getDay());
+				// console.log(aData.getTime())
+				_this.now_date = aData.getFullYear() + "-" + month + "-" + date;
+				_this.Hour = Hour +":"+Miunte+":"+Seconds
+				_this.Miunte = Miunte
+				_this.Seconds =Seconds
+				_this.week = week
+				}, 50);
+			},
+      //天气
+      async getTianQi() {
+				var result = await this.$axios.get('https://restapi.amap.com/v3/weather/weatherInfo?key=5411d59a86689ed2053d7e7a224ea1a6&city=360925&extensions=all')
+        this.City = result.data.forecasts[0]
+        if(result.data.forecasts[0].reporttime.slice(11,13)<19) {
+          this.weather=this.City.casts[0].dayweather
+          this.high=this.City.casts[0].daytemp
+        }else{
+          this.weather=this.City.casts[0].nightweather
+          this.high=this.City.casts[0].nighttemp
+        }
+			},
   }
 }
 </script>
@@ -61,29 +451,63 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .hello{
-  
   width: 1920px;
   height: 1080px;
   position: absolute;
   background-size: 100% 100%;
-  background-color: black;
+  background-color: #132949;
 }
 .title{
+  display: flex;
+  margin-left: 415px;
   color: aliceblue;
-  font-size: 50px;
-  font-style: italic;
+  font-size: 58px;
+  line-height: 59px;
+  /* font-style: italic; */
   font-weight: 600;
   text-align: center;
-  margin-top: 50px;
+  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: 1340px;
-  float: right;
-  margin-top: 60px;
+  width: 1270px;
+  margin-top: 73px;
   color: aliceblue;
-  text-align: left;
-  font-size: 14px;
+  text-align: center;
+  font-size: 24px;
   font-weight: 200;
 }
 .tianqi_list{
@@ -91,22 +515,22 @@ export default {
 }
 /* 车辆列表信息 */
 .car_list{
-  width: 1340px;
-  height: 600px;
+  width: 1520px;
+  height: 700px;
   float: right;
-  margin-top: 30px;
+  margin-top: 31px;
   text-align: left;
 }
 .car_item{
-  margin-top: 15px;
+  margin-top: 24px;
   display: flex;
-  line-height: 60px;
+  line-height: 71px;
 }
 .car_card_bg{
   display: inline-block;
   z-index: 0;
-  width: 50px;
-  height: 60px;
+  width: 60px;
+  height: 71px;
   background-size: 100% 100%;
   border-radius: 8px;
   background-color:rgba(254, 253, 253, 0.1);
@@ -117,15 +541,26 @@ export default {
   height: 60px;
   position: absolute;
   text-align: center;
-  margin-left: -50px;
-  font-size: 40px;
+  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: 50px;
+  margin-left: 39px;
   color: #f8751f;
-  font-size: 28px;
-  font-weight: 600;
+  font-size: 40px;
+  font-family: Microsoft YaHei;
+  font-weight: bold;
 }
 .green{
   color: #29e122;
@@ -136,20 +571,20 @@ export default {
 .yellow{
   color: #f8ce35;
 }
-.car_warn{
-  margin-left: 50px;
-  color: #e92731;
-  font-size: 16px;
-  font-weight: 200;
+.white{
+  color: #FFFFFF;
 }
-/* 天气 */
+.VIP{
+  color: #2BFFDF;
+}
+/* 结尾 */
 .last{
   width: 1340px;
   float: right;
-  margin-top: 20px;
+  margin-top: 51px;
   color: aliceblue;
   text-align: left;
-  font-size: 16px;
+  font-size: 24px;
   font-weight: 200;
 }
 </style>

src/main.js

@@ -2,9 +2,15 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import axios from "axios"
+// import VueSocketIO from 'vue-socket.io';
+// import './assets/style/border.css'
+// import './assets/style/reset.css'
 
 Vue.config.productionTip = false
 
+Vue.prototype.$axios = axios;
+
 new Vue({
   router,
   store,

src/router/index.js

@@ -1,14 +1,14 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+import HelloWorld from '../components/HelloWorld.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
-    name: 'Home',
-    component: Home
+    name: 'HelloWorld',
+    component: HelloWorld
   },
   // {
   //   path: '/about',

src/socket/socket.js

@@ -0,0 +1,217 @@
+// const express = require('express')
+// const http = require('http')
+// const socketio = require('socket.io')
+
+// const port = 3001
+// const app = express()
+// const server = http.createServer(app)
+// const io = socketio(server)
+
+// server.listen(port, ()=> {
+//   console.log('server running on port 3001.');
+// })
+
+// app.get('/', (req, res) => {
+//   res.send('hello2 nodejs111.')
+//   //设置响应头 允许跨域
+//   // res.setHeader('Access-Control-Allow-Origin','*');
+//   // //响应头
+//   // res.setHeader('Access-Control-Allow-Headers','*');
+//   // //响应一个数据
+//   // const data={
+//   //     name:'atguigu'
+//   // };
+//   // //对对象进行字符串转换
+//   // let str=JSON.stringify(data);
+//   // //设置响应体
+//   // res.send(str);
+// })
+
+// const user2socket = {}
+// const socket2user = {}
+// let currGame = {
+//   success: false,
+//   holder: '',
+//   answer: '',
+//   lines: []
+// }
+
+// server.on('connection',function (socket) { 
+//     console.log('有客户端进来了' + socket);
+//     // 监听并接受客户端发的消息
+//     // server.on('direction',function (data) { 
+//     //     console.log('收到消息:' + data);
+//     //     // 向客户端回复消息
+//     //     setTimeout(() => {
+//     //         socket.emit('textmsg','我已经收到啦！')
+//     //     }, 3000);
+        
+//     //  })
+//      // 监听并接受客户端发的消息
+//     socketio.on('direction',function (data) { 
+//       console.log('收到消息22:' + data);
+//       // 向客户端回复消息
+//       setTimeout(() => {
+//           socket.emit('direction','我已经收到啦！')
+//       }, 3000);
+      
+//    })
+// })
+
+// server.on('connection', (socket) => {
+//     console.log('进入回复')
+
+
+//   console.log('user %s connected.', socket.id);
+
+
+//   // 问候语
+//   socketio.on('sayHello', (user, fn) => {
+//     fn('hello ' + user.name)
+//   })
+
+//   // 校验昵称是否存在
+//   socket.on('checkUserExist', (nickname, fn) => {
+//     // 校验user2socket对象中是否存在该昵称,并共同回调方法返回结果
+//     // !!表示逻辑与的取反运算，变量值为null,'',undefined时，得到的结果为false
+//     fn(!!user2socket[nickname])
+//   })
+
+//   // 进入房间
+//   socket.on('enterRoom', (nickname) => {
+
+//     // 添加用户信息
+//     user2socket[nickname] = socket.id
+//     socket2user[socket.id] =  nickname
+
+//     // 发送玩家列表给当前用户
+//     socket.emit('roomInfo', {
+//       nicknames: Object.keys(user2socket),
+//       holder: currGame?.holder,
+      
+//     }),
+
+//     /**
+//      * socket.emit() 向当前建立连接的客户端广播
+//      * socket.broadcast.emit() 向除建立连接之外的客户端进行广播
+//      * io.sockets.emit() 向所有的客户端进行广播
+//      */
+//     // 发送欢迎提示信息给所有玩家
+//     io.sockets.emit('userEnter', nickname)
+//   }),
+
+//   // 离开游戏
+//   socket.on('exitGame', () => {
+    
+//     let sid = socket.id
+//     let nickname = socket2user[sid]
+//     delete socket2user[sid]
+//     delete user2socket[nickname]
+
+//     // 主持人离开，游戏终止
+
+//     // 发送离开的用户信息给其他人
+//     socket.broadcast.emit('userLeave', nickname)
+
+//     // 打印监听日志
+//     console.log('user %s disconnect.', socket.id)
+//   }),
+
+//   // 通知其他玩家开始画图
+//   socket.on('newLine', (line) => {
+//     if (currGame?.lines) {
+//       currGame.lines.push(line)
+//       socket.broadcast.emit('newLineCallback', line)
+//     }
+//   }),
+
+//   // 通知其他玩家开始更新画线
+//   socket.on('updateLine', (lastLine) => {
+//     // currGame?.lines 等价于 currGame && currGame.lines
+//     if (currGame?.lines) {
+//       currGame.lines[currGame.lines.length - 1] = lastLine
+//       socket.broadcast.emit('updateLineCallback', lastLine)
+//     }
+//   })
+
+//   // 断开连接
+//   socket.on('disconnect', () => {
+    
+//     let sid = socket.id
+//     let nickname = socket2user[sid]
+//     delete socket2user[sid]
+//     delete user2socket[nickname]
+
+//     // 主持人离开，游戏终止
+
+//     // 发送离开的用户信息给其他人
+//     socket.broadcast.emit('userLeave', nickname)
+
+//     // 打印监听日志
+//     console.log('user %s disconnect.', socket.id)
+//   })
+  
+// })
+
+
+
+
+const http = require('http');
+const sio = require('socket.io');
+// const fs = require('fs');
+
+const server = http.createServer((req,res) => {
+    res.writeHead(200,{ 'content-type': 'text/html'});
+    // res.end(fs.readFileSync('./index.html'));
+});
+
+// server.listen(1335)
+
+//创建socket 服务器
+const socket = server.listen(1336);
+
+//监听客服端的连接状态
+server.on('connection', (socket) => {
+    //打印客户端的连接提示
+    console.log('客户端建立连接！');
+    //发送给客户端数据
+    // socket.send('你好！');
+
+    //监听客户端发送过来的数据
+    socket.on('message',(msg) => {
+        console.log('接收到一个消息：',msg);
+    })
+    //监听客户端的断开连接事件
+    socket.on('disconnect',() =>{
+        console.log('客户端断开连接！');
+    })
+})
+
+
+
+
+
+// const http = require('http').createServer();
+// // 加载socket.io模块 获取socketio对象
+// // 用于处理客户短的websocket 连接他需要http服务器
+// const socketio=require('socket.io')(http);
+// // 通过socketio 监听客户端发的建立websocket 连接请求
+// // 一旦收到 立即执行回调方法 并且传入该客户端通信 
+// // 所需要的socket对象
+// // 监听
+// socketio.on('connection',function (socket) { 
+//     console.log('有客户端进来了' + socket.id);
+//     // 监听并接受客户端发的消息
+//     socket.on('textmsg',function (data) { 
+//         console.log('收到消息:' + data);
+//         // 向客户端回复消息
+//         setTimeout(() => {
+//             socket.emit('textmsg','我已经收到啦！')
+//         }, 3000);
+        
+//      })
+// })
+// //  启动服务器 监听4200端口
+// http.listen(4100,()=>{
+// console.log('服务器已经启动');
+// })

src/views/Home.vue

@@ -1,17 +1,12 @@
 <template>
   <div class="home">
-    <HelloWorld msg="南昌交通学院欢迎您！"/>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
 
 export default {
   name: 'Home',
-  components: {
-    HelloWorld
-  }
 }
 </script>

vue.config.js

@@ -0,0 +1,44 @@
+const path = require('path')
+
+// vue.config.js
+function resolve(dir) {
+	return path.join(__dirname, dir);
+}
+module.exports = {
+	// configureWebpack: {
+	// 	externals: {
+	// 		'AMap': 'AMap'
+	// 	}
+	// },
+	// ...
+	chainWebpack: config => {
+		config.resolve.alias
+			.set("static", resolve("src/static"))
+	},
+	publicPath: '', // 因为我用的是模板，人家表明了是要改这个(*^_^*) outputDir: 'dist', assetsDir: 'static',
+
+	// 它支持webPack-dev-server的所有选项
+	devServer: {
+		host: "localhost",
+		port: 8080, // 端口号
+		https: false, // https:{type:Boolean}
+		// open: true, //配置自动启动浏览器
+		// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
+
+		// 配置多个代理
+		proxy: {
+			"/kuayu": {
+				// target: "https://jtishfw.ncjti.edu.cn/jxch-smartmp", // 要访问的接口域名
+				// target: "http://101.34.64.169:8080/bigData", // 测试
+				// target: "http://58.17.42.179:90/bigData2", //正式数据库
+				target: "http://172.16.20.76:8080", //正式数据库
+				ws: true, // 是否启用websockets
+				changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
+				pathRewrite: {
+					'^/kuayu': '' //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add'，直接写'/api/user/add'即可
+				}
+			},
+			}
+		}
+
+}