体育对接实时链接

src/views/HomeView.vue

@@ -142,7 +142,7 @@ import { numGrow,ecMaxVal,numberGrow} from '@/utils/comm';
 
 // 引入api
 import * as homeApi from '@/api/home'
-
+let ws = null;
 export default {
   name: 'HomeView',
   data() {
@@ -700,12 +700,12 @@ export default {
     getsckdata(){
       let that = this;
       // websocket 
-      const ws = new WebSocket(publicConfig.WS_URL_ZL);
+      ws = new WebSocket(publicConfig.WS_URL_ZL);
       ws.onopen = function() {
-        console.log("ws connected success!")
+        // console.log("ws connected success!")
       };
       ws.onclose = function(event) {
-        console.log('WebSocket连接已关闭');
+        // console.log('WebSocket连接已关闭');
       };
       ws.onmessage = (e)=> {
         var jstr = JSON.parse(e.data);
@@ -822,6 +822,9 @@ export default {
       });
     }
 
+  },
+  beforeUnmount(){
+    ws.close();
   }
 
 }

src/views/TycView.vue

@@ -402,6 +402,7 @@ import * as echarts from 'echarts';
 import * as btApi from '../api/home'
 import { ecMaxVal,numGrow } from '@/utils/comm';
 
+let ws = null;
 export default {
   name: 'TycView',
   data() {
@@ -431,6 +432,8 @@ export default {
     this.cg_line()
     //
     this.getTdcg()
+
+    this.getsckdata()
   },
   methods: {
     // 110,210,310 
@@ -495,7 +498,7 @@ export default {
       });    
       // 2  
     },
-    // 24H 进馆人数
+    // 24H 服务人次绘制柱形图
     cgsf_line() {
       var chartDom = document.getElementById('gcins_charts');
       var myChart = echarts.init(chartDom);
@@ -625,19 +628,19 @@ export default {
         ]
       }
 
-      option && myChart.setOption(option);
+      // option && myChart.setOption(option);
       //消停几秒后开始，动画
     
-     setInterval(()=>{
+    //  setInterval(()=>{
         myChart.clear()
         option && myChart.setOption(option);
-     },4000);
+    //  },4000);
     },
 
     // 获取各场馆的趋势
     getTdcg(){
       let guids = "110|210|310"
-      btApi.tdGroupRealTimeEnter({groupsId:guids}).then(res=>{
+      btApi.tdGroupRealTimeEnter({type:1}).then(res=>{
         console.log(res)
         const tmpdata = res.data.data
         // X 轴的名称字段
@@ -658,7 +661,7 @@ export default {
       })
     },
 
-    // 场馆人流趋势
+    // 场馆人流趋势绘制线图
     cg_line() {
       var chartDom = document.getElementById("gc_charts");
       var myChart = echarts.init(chartDom);
@@ -817,9 +820,81 @@ export default {
         series: series,
       }
 
+      myChart.clear()
       option && myChart.setOption(option);
     },
 
+    getsckdata(){
+      let that = this;
+      // websocket 
+      ws = new WebSocket(publicConfig.WS_URL_TY);
+      ws.onopen = function() {
+        // console.log("ws connected success!")
+      };
+      ws.onclose = function(event) {
+        // console.log('WebSocket连接已关闭');
+      };
+      ws.onmessage = (e)=> {
+        var jstr = JSON.parse(e.data);
+        if(!jstr){
+          return;
+        }
+
+        // 24 小时柱形图数据
+        const vkdata = new Array;
+        vkdata.push({
+          xname: jstr.getPassHoursData.data.dkeys.slice(-8, jstr.getPassHoursData.data.dkeys.length),
+          xval:  jstr.getPassHoursData.data.dvalue.slice(-8, jstr.getPassHoursData.data.dvalue.length)
+        })
+        that.ecbardata = vkdata;
+        that.cgsf_line();
+        // 线图数据
+        function linedata(){
+          that.zxliddata=[];
+          that.rsqsDataName=[],that.rsqsDatas=[];
+          const tmpdata = jstr.toDayGroupsEnterNum.data;
+          tmpdata.forEach((item) => {
+            that.rsqsDataName.push(item.groupName);
+            that.rsqsDatas.push(item.list)
+          })
+          
+          that.zxlindata = jstr.toDayGroupsEnterNum.data[0].list.dkeys;
+          that.rsqsDatas.forEach((item) => {
+            let rsqsData = []
+            Object.getOwnPropertyNames(item).forEach((value) => {
+              if(value=='dvalue'){
+                rsqsData = item[value];
+              }
+            });
+            that.zxliddata.push(rsqsData)
+          })
+          that.cg_line()
+        }
+        linedata();
+        // 占比、顶部数据
+        function proportion(){
+          // 场馆人次占比
+          const tgdata = jstr.allGroupTimeNum.data.data.groupsData
+          that.cgdata = tgdata
+          // today in
+          // tgdata.forEach(item=>{
+          //   that.tdnum += item.noRepeatInNum
+          // });
+        }
+        proportion();
+        // 服务人数数据
+        const rtdata = jstr.allGroupNum.data
+        that.tdnum = rtdata.day.noRepeatInNum
+        that.wdnum = rtdata.week.noRepeatInNum
+        that.tmdata = rtdata.month.noRepeatInNum
+        that.tydata = rtdata.year.noRepeatInNum
+      }
+    }
+
   },
+  beforeUnmount(){
+    // console.log('体育关闭链接');
+    ws.close();
+  }
 }
 </script>