总览更新

src/views/HomeView.vue

@@ -54,18 +54,18 @@
       <div class="cglist cgleft">
         <ul>
           <li>
-            <span>{{ tycra.name }}</span>
-            <span>{{ tycra.value }}</span>
+            <span>{{ circularData.groupName[0] }}</span>
+            <span>{{ circularData.proportion[0] }}</span>
             <span><img src="../assets/img/tyc_icon.png" /></span>
           </li>
           <li>
-            <span>{{tygra.name}}</span>
-            <span>{{ tygra.value }}</span>
+            <span>{{ circularData.groupName[1] }}</span>
+            <span>{{ circularData.proportion[1] }}</span>
             <span><img src="../assets/img/tyg_icon.png" /></span>
           </li>
           <li>
-            <span>{{yygra.name}}</span>
-            <span>{{ yygra.value }}</span>
+            <span>{{ circularData.groupName[2] }}</span>
+            <span>{{ circularData.proportion[2] }}</span>
             <span><img src="../assets/img/yyg_icon.png" /></span>
           </li>
         </ul>
@@ -77,18 +77,18 @@
         <ul>
           <li>
             <span><img src="../assets/img/tsg_icon.png" /></span>
-            <span>20%</span>
-            <span>图书馆</span>
+            <span>{{ circularData.proportion[3] }}</span>
+            <span>{{ circularData.groupName[3] }}</span>
           </li>
           <li>
             <span><img src="../assets/img/whg_icon.png" /></span>
-            <span>12%</span>
-            <span>文化馆</span>
+            <span>{{ circularData.proportion[4] }}</span>
+            <span>{{ circularData.groupName[4] }}</span>
           </li>
           <li>
             <span><img src="../assets/img/bwg_icon.png" /></span>
-            <span>{{bwgra.value}}</span>
-            <span>{{bwgra.name}}</span>
+            <span>{{ circularData.proportion[5] }}</span>
+            <span>{{ circularData.groupName[5] }}</span>
           </li>
         </ul>
       </div>
@@ -98,23 +98,36 @@
     <!-- 今日场馆人数 -->
     <div class="today_rs">
       <div class="tdrs_title">
-        今日各馆趋势
+        今日各场馆服务人次趋势
       </div>
       <div id="tdrs" style="width:100%;height:12rem;"></div>
     </div>
 
     <!-- 個場館實時進館人數 -->
     <div class="pcgrs">
-      <div class="pcgrs_title">各场馆实时进馆人数</div>
+      <div class="pcgrs_title">各场馆实时服务人次</div>
       <!-- 場館實時 -->
       <div class="pcg_item" v-for="item in ssjgNumDatas" :key="item.groupId">
         <span class="pcpos">{{item.groupName}}</span>
+        <span class="rbtitle">日累计人数</span>
         <p class="pcval" :class="'pcani'" :id="item.groupId">{{ item.allEnter }}</p>
-        <span class="pcrate"
+        <!-- <span class="pcrate"
           :class="[{ pcrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90 }, { pcrate3: parseInt(item.proportion) >= 90 },'pcani']">{{
-            item.proportion }}</span>
+            item.proportion }}</span> -->
+        <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>
+    </div>
+    
+    <div class="rbox_label">
+      <span></span>舒适
+      <span></span>拥挤
+      <span></span>爆满
+    </div>
 
 
   </div>
@@ -151,6 +164,7 @@ export default {
       yygra:[],
       // bwg
       bwgra:[],
+      circularData: {groupName:[],proportion:[]},
 
       day_num: 0,
       week_num: 0,
@@ -207,6 +221,7 @@ export default {
     
     // 获取不同时期的数据
     getDataIn(reqType){
+      let that = this;
       //
       btApi.allGroupTimeNum({ 'granularity': reqType }).then(res => {
         const kldata = res.data.data.allTimeData
@@ -226,7 +241,7 @@ export default {
         this.showorders()
         // 环图数据
         const ccdata = res.data.data.groupsData
-        let tcdata =new Array;
+        let tcdata =new Array;that.circularData.groupName=[];that.circularData.proportion=[];
         ccdata.forEach(function(item,idx){
           // idx
           tcdata.push({
@@ -234,25 +249,28 @@ export default {
             value: item.noRepeatInNum,
             name: item.groupName
           })
+          that.circularData.groupName.push(item.groupName)
+          that.circularData.proportion.push(item.proportion)
         });
         //
-        let tcidata = new Array;
-        ccdata.forEach(item=>{
-          // crcle infomation 
-          tcidata.push({
-            name:item.groupName,
-            rate:item.proportion
-          });
-        });
-        // console.log(tcidata)
         this.kcdata = tcdata
         // 环形图
         this.cgchart()
+
+        // let tcidata = new Array;
+        // ccdata.forEach(item=>{
+          // crcle infomation 
+          // tcidata.push({
+          //   name:item.groupName,
+          //   rate:item.proportion
+          // });
+        // });
+        // console.log(tcidata)
         // this.kcrate = tcidata
-        this.tycra = tcidata[0]
-        this.tygra = tcidata[1]
-        this.yygra = tcidata[2]
-        this.bwgra = tcidata[3]
+        // this.tycra = tcidata[0]
+        // this.tygra = tcidata[1]
+        // this.yygra = tcidata[2]
+        // this.bwgra = tcidata[3]
 
       });
     },
@@ -271,7 +289,7 @@ export default {
       var option;
 
       //var cdata = [100, 200, 100, 200, 100, 200, 250, 50, 30, 130, 150, 110, 120]
-       var cdata = this.klvdata
+       var cdata = this.klvdata.slice(-8,this.klvdata.length)
       // var data = [Math.random() * 300]
       option = {
         // backgroundColor: '#031245',
@@ -328,7 +346,7 @@ export default {
             },
             show: true,
           },
-          data: this.kltdata,
+          data: this.kltdata.slice(-8,this.kltdata.length),
           type: 'category',
         },
         yAxis: {
@@ -477,7 +495,7 @@ export default {
           {
             name: 'Access From',
             type: 'pie',
-            radius: ['60%', '70%'], //曲线范围
+            radius: ['70%', '80%'], //曲线范围
             avoidLabelOverlap: false,
             itemStyle: {
               borderRadius: 40,
@@ -670,7 +688,7 @@ export default {
       });
     },
 
-    // 获取实时数据
+    // 获取实时进馆数据
     getInfoDatas() {
       // interface
       homeApi.tdGroupRealTimeEnter().then(res=>{
@@ -680,19 +698,105 @@ export default {
 
     // udp
     getsckdata(){
+      let that = this;
       // websocket 
-      const ws = new WebSocket("ws://10.97.121.2/rt");
+      const ws = new WebSocket(publicConfig.WS_URL_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)
-        this.ssjgNumDatas=jstr.data
+        var jstr = JSON.parse(e.data);
+        if(!jstr){
+          return;
+        }
+
+        // 饼图、各场馆实时服务人次数据
+        const pieData = jstr.realTimeData.data;
+        that.circularData.groupName=[];that.circularData.proportion=[];that.kcdata=[];
+        pieData.forEach((item) => {
+          that.circularData.groupName.push(item.groupName)
+          that.circularData.proportion.push(item.proportion)
+          that.kcdata.push({
+            name:item.groupName,
+            value:item.proportion.split('%')[0]
+            // value: item.noRepeatInNum,
+          })
+        })
+        // 环形图
+        this.cgchart()
+
+        that.ssjgNumDatas = pieData;// 各场馆实时服务人次数据
+        // 折线图数据
+        function handleLine(){
+          that.rsqsDatas = [];that.rsqsDataName = [];
+          that.zxliddata = [];
+          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=='dkeys'){}
+              if(value=='dvalue'){
+                rsqsData = item[value];
+              }
+            });
+            that.zxliddata.push(rsqsData)
+
+            // 场馆人流趋势线面图
+            that.cgrs_line();
+          })
+        }
+        handleLine();
+        
+        // 柱形数据
+        function handleBar(){
+          let tmpklqsdata, dkeys, datas=[];
+          switch (that.klselt) {
+            case 'd': 
+              tmpklqsdata = jstr.allGroupTimeNumDay.data.data.allTimeData;
+              dkeys = jstr.allGroupTimeNumDay.data.data.dkeys;
+            break;
+            case 'm': 
+              tmpklqsdata = jstr.allGroupTimeNumMonth.data.data.allTimeData;
+              dkeys = jstr.allGroupTimeNumMonth.data.data.dkeys;
+            break;
+            case 'y': 
+              tmpklqsdata = jstr.allGroupTimeNumYear.data.data.allTimeData;
+              dkeys = jstr.allGroupTimeNumYear.data.data.dkeys;
+            break;
+          }
+
+          Object.values(tmpklqsdata).forEach((value) => {
+            datas.push(value.num);
+          });
+          that.kltdata = dkeys;
+          that.klvdata = datas;
+          // 圆柱
+          that.showorders();
+        }
+        handleBar();
+
+        // 顶部数据
+        numGrow("ycdn",jstr.allGroupNum.data.year.noRepeatInNum);
+        //今日
+        numGrow("dynum",jstr.allGroupNum.data.day.noRepeatInNum)
+        // week
+        numGrow("wknum",jstr.allGroupNum.data.week.noRepeatInNum)
+        // month
+        numGrow("mnum",jstr.allGroupNum.data.month.noRepeatInNum)
       };
     },
 
 
-
     // 各个场馆的人流
     getGcgNumDatas() {
       homeApi.tdGroupRealTimeEnter().then(res => {
@@ -931,27 +1035,33 @@ export default {
 
 /* 饼图 */
 .cgbox .cgpies {
-  width: 40%;
+  width: 34%;
   height: 12rem;
   float: left;
 }
 
 .cgbox .cgleft {
-  width: 30%;
+  width: 33%;
   float: left;
 }
+.cgbox .cgleft ul li{
+  display: flex;
+  justify-content: end;
+}
 
 .cgbox .cgleft>ul {
   padding-left: 0rem;
+  padding-right: 0.3rem;
 }
 
 .cgbox .cgright {
-  width: 30%;
+  width: 33%;
+  /* height: 12rem; */
   float: left;
 }
 
 .cgbox .cgright>ul {
-  padding-left: 0.5rem;
+  padding-left: 0.2rem;
 }
 
 .cgbox .cglist {
@@ -995,12 +1105,6 @@ export default {
   height: 0.68rem;
 }
 
-.cgbox .cgright {
-  width: 30%;
-  height: 12rem;
-  float: left;
-}
-
 /* 今日人數 */
 .today_rs {
   margin-top: 1rem;
@@ -1025,6 +1129,7 @@ export default {
   clear: both;
   margin-top: 2.6rem;
   width: 100%;
+  display: inline-block;/**撑开高度 */
 }
 
 .pcgrs .pcgrs_title {
@@ -1110,8 +1215,13 @@ export default {
   float: left;
   text-align: center;
 } */
-
-.pcgrs .pcg_item .pcrate {
+.pcgrs .pcg_item .rbtitle{
+  position: absolute;
+  top: 2.7rem;
+  left: 2rem;
+  font-size: 0.2rem;
+}
+.pcgrs .pcg_item .rbrate0 {
   width: 32%;
   height: 3.4rem;
   line-height: 3.4rem;
@@ -1123,17 +1233,46 @@ export default {
   position: absolute;
   bottom: 0.4rem;
   right: 0.63rem;
-  background-image: url('../assets/img/安静.png');
-  background-size: 100% 100%;
-  background-position: 100% 100%;
-  background-repeat: no-repeat;
 }
 
-.pcgrs .pcg_item .pcrate2 {
-  background-image: url('../assets/img/舒适.png');
+.pcgrs .pcg_item .rbrate2 {
+  background-image: url('../assets/img/2.png');
+  background-size: 100% 100%;
 }
 
-.pcgrs .pcg_item .pcrate3 {
-  background-image: url('../assets/img/拥挤.png');
+.pcgrs .pcg_item .rbrate3 {
+  background-image: url('../assets/img/3.png');
+  background-size: 100% 100%;
+}
+.pcgrs .pcg_item .rbrate4 {
+  background-image: url('../assets/img/1.png');
+  background-size: 100% 100%;
+}
+.rbox_label{
+  /* width: 100%; */
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  font-size: 0.8rem;
+  color: #aaa;
+  margin-right: 0.5rem;
+}
+.rbox_label span{
+  display: inline-block;
+  width: 1.2rem;
+  height: 1.2rem;
+  margin: 0px 0.5rem;
+}
+.rbox_label span:nth-of-type(1){
+  background: url('../assets/img/舒适.png');
+  background-size: 100% 100%;
+}
+.rbox_label span:nth-of-type(2){
+  background: url('../assets/img/拥挤.png');
+  background-size: 100% 100%;
+}
+.rbox_label span:nth-of-type(3){
+  background: url('../assets/img/爆满.png');
+  background-size: 100% 100%;
 }
 </style>