更新样式、总览柱形图实时数据对接

src/views/index.vue

@@ -118,12 +118,14 @@
             <span class="rbtitle">日累计人数</span>
             <!-- <span class="rbval">4,738</span> -->
             <span class="rbval">{{ item.allEnter }}</span>
-            <!-- <div class="rbrate"
-              :class="[{ rbrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90 }, { rbrate3: parseInt(item.proportion) >= 90 }]">{{
-                item.proportion }}
-            </div> -->
-            <div class="rbrate">{{ item.proportion }}</div>
-            <div class="rbrateBar">
+            <div class="rbrate0"
+              :class="parseInt(item.proportion)<50||parseInt(item.proportion)==50?'rbrate2':
+              (parseInt(item.proportion)<100||parseInt(item.proportion)==100?'rbrate3':'rbrate4')
+              "
+              >
+            </div>
+            <!-- <div class="rbrate">{{ item.proportion }}</div> -->
+            <div class="rbrateBar" v-if="0">
               <span :class="(item.proportion.split('%')[0])>0?'active':''"></span>
               <span :class="(item.proportion.split('%')[0])>16.666?'active':''"></span>
               <span :class="(item.proportion.split('%')[0])>33.333?'active':''"></span>
@@ -141,6 +143,11 @@
           </div> -->
 
         </div>
+        <div class="rbox_label">
+          <span></span>舒适
+          <span></span>拥挤
+          <span></span>爆满
+        </div>
       </div>
 
     </div>
@@ -153,6 +160,7 @@ import * as echarts from "echarts";
 // 引入api
 import * as homeApi from '@/api/home'
 let barChart = null, lineChart = null, pieChart = null;
+let ws;
 export default {
   data() {
     return {
@@ -223,7 +231,7 @@ export default {
       this.index_pie1();
     }, 1000)
 
-    this.getsckdata();
+    // this.getsckdata();
   },
   methods: {
     autoTimer0(){
@@ -735,13 +743,15 @@ export default {
           that.ssjgNumDatas = res.data.returnData
           console.log(that.ssjgNumDatas, 'that.ssjgNumDatas')
           that.ssjgNumDatas.forEach(item => {
-            let proportion = parseInt(item.proportion)
-            if (proportion >= 80 && proportion <= 90) {
-              this.$refs.proportionbox.addClass('rbrate2')
-            }
-            if (proportion > 90) {
-              this.$refs.proportionbox.addClass('rbrate3')
-            }
+            let proportion = parseInt(item.proportion);
+
+            // if (proportion < 50 || proportion == 50) {
+            //   this.$refs.proportionbox.addClass('rbrate2')
+            // }else if (proportion < 100 || proportion == 100) {
+            //   this.$refs.proportionbox.addClass('rbrate3')
+            // }else{
+            //   this.$refs.proportionbox.addClass('rbrate4')
+            // }
           })
         }
       });
@@ -920,10 +930,14 @@ export default {
     getsckdata(){
       let that = this;
       // websocket 
-      const ws = new WebSocket("ws://192.168.66.16/rt");
+      ws = new WebSocket("ws://192.168.66.16/zl");
       ws.onopen = function() {
         // console.log("ws connected success!")
       };
+      // 连接关闭时触发
+      ws.onclose = function(event) {
+        console.log('WebSocket连接已关闭');
+      };
       ws.onmessage = (e)=> {
         var jstr = JSON.parse(e.data)
         // console.log("11111", jstr, e);
@@ -943,27 +957,56 @@ export default {
           })
         })
         // 折线图数据
-        that.rsqsDatas = [];that.rsqsDataName = [];that.rsqsData_z = [];
-        const tmpdata = jstr.toDayGroupsEnterNum;
-        tmpdata.forEach((item) => {
-          that.rsqsDataName.push(item.groupName);
-          that.rsqsDatas.push(item.list)
-        })
+        function handleLine(){
+          that.rsqsDatas = [];that.rsqsDataName = [];that.rsqsData_z = [];
+          const tmpdata = jstr.toDayGroupsEnterNum.data;
+          tmpdata.forEach((item) => {
+            that.rsqsDataName.push(item.groupName);
+            that.rsqsDatas.push(item.list)
+          })
+          
+          that.rsqsXData = jstr.toDayGroupsEnterNum.data[0].list.dkeys;
+          that.rsqsDatas.forEach((item) => {
+            let rsqsData = []
+            Object.getOwnPropertyNames(item).forEach((value) => {
+              
+              if(value=='dkeys'){}
+              if(value=='dvalue'){
+                rsqsData = item[value];
+              }
+            });
+            that.rsqsData_z.push(rsqsData)
+          })
+        }
+        handleLine();
         
-        that.rsqsXData = jstr.toDayGroupsEnterNum[0].list.dkeys;
-        that.rsqsDatas.forEach((item) => {
-          let rsqsData = []
-          Object.getOwnPropertyNames(item).forEach((value) => {
-            
-            if(value=='dkeys'){}
-            if(value=='dvalue'){
-              rsqsData = item[value];
-            }
+        // 柱形数据
+        function handleBar(){
+          const tmpklqsdata1 = jstr.allGroupTimeNumDay.data.data.allTimeData;
+          const tmpklqsdata2 = jstr.allGroupTimeNumMonth.data.data.allTimeData;
+          const tmpklqsdata3 = jstr.allGroupTimeNumYear.data.data.allTimeData;
+          const dkeys1 = jstr.allGroupTimeNumDay.data.data.dkeys;
+          const dkeys2 = jstr.allGroupTimeNumMonth.data.data.dkeys;
+          const dkeys3 = jstr.allGroupTimeNumYear.data.data.dkeys;
+
+          let datas1 = [], datas2 = [], datas3 = [];
+          Object.values(tmpklqsdata1).forEach((value) => {
+            datas1.push(value.num);
           });
-          that.rsqsData_z.push(rsqsData)
-        })
-        // console.log(that.rsqsData_z, 'rsqsData_z')
-        
+          Object.values(tmpklqsdata2).forEach((value) => {
+            datas2.push(value.num);
+          });
+          Object.values(tmpklqsdata3).forEach((value) => {
+            datas3.push(value.num);
+          });
+          that.klqsDataD = datas1;
+          that.klqsXDataD = dkeys1;
+          that.klqsDataM = datas2;
+          that.klqsXDataM = dkeys2;
+          that.klqsDataY = datas3;
+          that.klqsXDataY = dkeys3;
+        }
+        handleBar();
       };
     },
   },
@@ -974,6 +1017,7 @@ export default {
     clearInterval(this.timer2);
     clearInterval(this.timer3);
     clearInterval(this.timer4);
+    // ws.close();
   }
 };
 </script>
@@ -1335,20 +1379,22 @@ export default {
   padding-left: 0.4rem;
   line-height: 1.9rem;
 }
-
+.rbox .rbox_con .rbitem .rbrate0{
+  width: 1.1rem;
+  height: 1.1rem;
+  text-align: right;
+  position: absolute;
+  bottom: 0.15rem;
+  right: 0.2rem;
+  font-size: 0.22rem;
+}
 .rbox .rbox_con .rbitem .rbrate {
   width: 0.92rem;
-  /* float: left; */
   height: 0.32rem;
   text-align: right;
   position: absolute;
   bottom: 0.85rem;
   right: 0.29rem;
-  /* color: #00D8FF; */
-  /* background-image: url(../assets/index/安静.png); */
-  /* background-size: 100% 100%; */
-  /* background-position: 100% 100%; */
-  /* background-repeat: no-repeat; */
   font-size: 0.22rem;
 }
 .rbox .rbox_con .rbitem .rbrateBar{
@@ -1371,13 +1417,44 @@ export default {
 }
 
 .rbox .rbox_con .rbitem .rbrate2 {
-  background-image: url(../assets/index/舒适.png);
-
+  background-image: url(../assets/index/2.png);
+  background-size: 100% 100%;
 }
 
 .rbox .rbox_con .rbitem .rbrate3 {
-  background-image: url(../assets/index/拥挤.png);
-
+  background-image: url(../assets/index/3.png);
+  background-size: 100% 100%;
+}
+.rbox .rbox_con .rbitem .rbrate4 {
+  background-image: url(../assets/index/1.png);
+  background-size: 100% 100%;
+}
+.rbox .rbox_label{
+  /* width: 100%; */
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  font-size: 0.22rem;
+  color: #aaa;
+  margin-right: 0.3rem;
+}
+.rbox .rbox_label span{
+  display: inline-block;
+  width: 0.35rem;
+  height: 0.35rem;
+  margin: 0px 0.15rem;
+}
+.rbox .rbox_label span:nth-of-type(1){
+  background: url(../assets/index/舒适.png);
+  background-size: 100% 100%;
+}
+.rbox .rbox_label span:nth-of-type(2){
+  background: url(../assets/index/拥挤.png);
+  background-size: 100% 100%;
+}
+.rbox .rbox_label span:nth-of-type(3){
+  background: url(../assets/index/爆满.png);
+  background-size: 100% 100%;
 }
 
 /* 页面背景 */