From 28c1f8b03ab0c17f833f7c793fdf7c77fb4a412c Mon Sep 17 00:00:00 2001
From: luyisha <luyisha@xingtongworld.com>
Date: Fri, 28 Jul 2023 20:04:57 +0800
Subject: [PATCH] 2

---
 src/api/home.js             |   9 ++
 src/common/flexible.js      |   9 +-
 src/views/cultrue/index.vue |  44 +++----
 src/views/index.vue         |   5 +-
 src/views/ty/index.vue      | 252 ++++++++++++++++++++++--------------
 5 files changed, 194 insertions(+), 125 deletions(-)

diff --git a/src/api/home.js b/src/api/home.js
index 779acd3..a899cc8 100644
--- a/src/api/home.js
+++ b/src/api/home.js
@@ -112,4 +112,13 @@ export function getID(param) {
 		method: 'post',
 		param,
 	})
+}
+
+// 24小时场馆总趋势
+export function getAllfFlow(param) {
+    return request({
+		url: '/pass.passcc/getPassHoursData',
+		method: 'get',
+		param,
+	})
 }
\ No newline at end of file
diff --git a/src/common/flexible.js b/src/common/flexible.js
index 2ad23f3..904524d 100644
--- a/src/common/flexible.js
+++ b/src/common/flexible.js
@@ -82,14 +82,19 @@
 
   function refreshRem() {
     var width = docEl.getBoundingClientRect().width;
-    // 最小1366px，最大适配2560px
+    // 最小1366px，最大适配2560px，修改最大适配3840px
     if (width / dpr < 1366) {
       width = 1366 * dpr;
-    } else if (width / dpr > 2560) {
+    } 
+    else if (width / dpr == 3840) {
+      width = 3840 * dpr;
+    } 
+    else if (width / dpr > 2560) {
       width = 2560 * dpr;
     }
     // 设置成24等份，设计稿时1920px的，这样1rem就是80px
     var rem = width / 24;
+    // var rem = width / 12;// 设置成12等份，设计稿时3840px的，这样1rem就是160px
     docEl.style.fontSize = rem + "px";
     flexible.rem = win.rem = rem;
   }
diff --git a/src/views/cultrue/index.vue b/src/views/cultrue/index.vue
index a631b5d..70982d9 100644
--- a/src/views/cultrue/index.vue
+++ b/src/views/cultrue/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-scale-screen width="1920" height="1080">
+  <v-scale-screen width="3840" height="2160">
     <div id="cultrue">
       <!-- 左侧 -->
       <div class="leftbox">
@@ -116,9 +116,8 @@ export default {
     }, 200);
     // 博物馆人数
     this.bwugrs();
-    this.getData24h();
-
-    this.cultrue_bar1();
+    this.getData24h();//24小时总服务
+    
     this.cultrue_bar2();
     this.cultrue_bar3();
     this.addNumber(0, this.todayNum, 'insv')
@@ -130,7 +129,9 @@ export default {
     // this.addNumber(0, this.tsg_num, 'cmdval3')
     this.getTsgInfoDatas()
     // var name = ['图书馆', '文化馆', '博物馆']
-
+    setTimeout(() => {
+      this.cultrue_bar1();//24小时总服务
+    }, 200);
   },
   methods: {
     cultrue_bar1() {
@@ -298,7 +299,7 @@ export default {
         myChart.setOption({
           animation: true,
           xAxis: {
-            data: xData
+            data: that.data24hX
           },
           series: [{
               type: 'bar',
@@ -890,29 +891,27 @@ export default {
             Object.values(tmpdata).forEach((value) => {
               datas.push(value.num)
             });
-            that.data24h = datas;
-            that.data24hX = res.data.data.allTimeData;
-        });
+          });
       });
       
     },
     // 24小时趋势
     getData24h(){
       let that = this;
-      homeApi.allGcgNumDatas().then(res=>{
-        console.log(res, '=====');
-        let id = res.data.data[1].groupId;
-        // console.log(res.data.data, '=====')
-        return;
-        const tmpdata = res.data.data.allTimeData;
-        let datas = []
-        Object.values(tmpdata).forEach((value) => {
-          datas.push(value.num)
+      homeApi.getID().then(res=>{
+          // console.log(res, '=====');
+          let idArr = "";
+          res.data.data.map(item=>{
+            if(item.type==1){
+              idArr += "|"+item.groupId;
+            }
+          })
+          homeApi.getAllfFlow({groupsId:idArr}).then(res=>{
+            // console.log(res, '=====');
+            that.data24h = res.data.data.dvalue;
+            that.data24hX = res.data.data.dkeys;
         });
-        that.data24h = datas;
-        that.data24hX = res.data.data.allTimeData;
       });
-      
     }
   },
 };
@@ -1250,7 +1249,8 @@ export default {
     overflow: visible !important;
     margin: 0px 0.57rem 0px 0.57rem !important;
     box-sizing: border-box !important;
-    transform-origin: center top !important;
+    // transform-origin: center top !important;
+    transform: scale(1) !important;
   }
 }
 #cultrue{
diff --git a/src/views/index.vue b/src/views/index.vue
index c68e5c1..b67fb5e 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-scale-screen width="1920" height="1080">
+  <v-scale-screen width="3840" height="2160">
     <div id="index">
       <!-- 左边 -->
       <div class="indexleftbox">
@@ -1360,7 +1360,8 @@ export default {
     // margin: 0px 0.29rem 0px 0.15rem !important;
     margin: 0px !important;
     box-sizing: border-box !important;
-    transform-origin: center top !important;
+    // transform-origin: center top !important;
+    transform: scale(1) !important;
   }
 #index{
   // transform: scale(1.25);
diff --git a/src/views/ty/index.vue b/src/views/ty/index.vue
index cf8212e..818b3b7 100644
--- a/src/views/ty/index.vue
+++ b/src/views/ty/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-scale-screen width="1920" height="1080">
+  <v-scale-screen width="3840" height="2160">
     <div id="ty">
 
       <div class="main">
@@ -102,7 +102,7 @@
                 <div class="venue_proportion_top" style="cursor: pointer;" @click="istygShowfn">
                   <span class="venue_proportion_box_num" style="position: relative;cursor: pointer;">
                     <div id="pieChart1" style="height: 1.55rem;width: 1.55rem;margin: 0px auto;"></div>
-                    <div class="" style="position: absolute;top: 0;width: 100%;line-height: 1.55rem;font-size: 0.22rem;">25%</div>
+                    <div class="" style="position: absolute;top: 0;width: 100%;line-height: 1.55rem;font-size: 0.22rem;">{{ cgp_1 }}</div>
                     <!-- <div v-show="istygShow == true" style="cursor: pointer;overflow-y: hidden;padding: 0.5rem;"
                       @click="istygShowfn">
                     </div> -->
@@ -110,14 +110,14 @@
                   </span>
                 </div>
                 <div class="venue_proportion_bo">
-                  <span>{{ cgn_1||0 }}</span>
+                  <span>{{ cgn_1 }}</span>
                 </div>
               </div>
               <div class="venue_proportion">
                 <div class="venue_proportion_top" style="cursor: pointer;" @click="istygShowfn2">
                   <span class="venue_proportion_box_num" style="position: relative;cursor: pointer;">
                     <div id="pieChart2" style="height: 1.55rem;width: 1.55rem;margin: 0px auto;"></div>
-                    <div class="" style="position: absolute;top: 0;width: 100%;line-height: 1.55rem;">25%</div>
+                    <div class="" style="position: absolute;top: 0;width: 100%;line-height: 1.55rem;">{{ cgp_2 }}</div>
                     <!-- <div v-show="istygShow2 == true" style="cursor: pointer;overflow-y: hidden;padding: 0.5rem;"
                       @click="istygShowfn2">
                     </div> -->
@@ -132,7 +132,7 @@
                 <div class="venue_proportion_top" style="cursor: pointer;" @click="istygShowfn3">
                   <span class="venue_proportion_box_num" style="position: relative;cursor: pointer;">
                     <div id="pieChart3" style="height: 1.55rem;width: 1.55rem;margin: 0px auto;"></div>
-                    <div class="" style="position: absolute;top: 0;width: 100%;line-height: 1.55rem;">25%</div>
+                    <div class="" style="position: absolute;top: 0;width: 100%;line-height: 1.55rem;">{{ cgp_3 }}</div>
                     <!-- <div v-show="istygShow3 == true" style="cursor: pointer;overflow-y: hidden;padding: 0.5rem;"
                       @click="istygShowfn3">
                     </div> -->
@@ -187,14 +187,22 @@ export default {
       yearNum:0,
       // 一天的数据
       daData:[],
+      // 24小时的数据
+      data24hX:[],
       data24h: [],
       // 场馆人次占比
+      groupsData: [],
       cgp_1:'',
       cgp_2:'',
       cgp_3:'',
       cgn_1:'',
       cgn_2:'',
       cgn_3:'',
+      // 趋势图
+      rsqsXData: [],
+      rsqsDatas: [],
+      rsqsDataName: [],
+      rsqsDataAll: [],
 
       initCount: 0,
       pubKey0: '',
@@ -230,17 +238,20 @@ export default {
     }, 200);
     // // 计算三个馆的进馆人数
     this.$nextTick( ()=>{
-        this.getStat()
+        this.getStat();
+        this.getData24h();//24小时总服务
+        this.gethomeBarData();//右上角占比
+        this.getGcgNumDatas();//右下角趋势图
     });
     
 
     this.$nextTick( ()=>{
       setTimeout(() => {
-        this.ty_bar1()
+        this.ty_bar1()//24小时总服务
+        this.ty_pieDo()//右上角占比
+        this.ty_bar3()//右下角趋势图
       }, 200);
       // this.ty_bar2()
-      this.ty_bar3()
-      this.ty_pie1()
     }) 
 
 
@@ -290,10 +301,8 @@ export default {
 
     ty_bar1() {
       let that = this;
-      var xData = ['09:00', '10:00', '11:00','12:00', '13:00', '14:00','15:00', '16:00', '17:00','18:00', '20:00', '21:00', '22:00'];
-      // console.log(that.daData.dkeys, 'that.daData.dkeys')
-      var data24h = [10000, 20000, 10000, 20000, 10000, 20000, 25000, 50000, 30000, 13000, 15000, 11000, 12000, 10000];
-      // data24h = that.data24h;
+      // var xData = that.data24hX;
+      var data24h = that.data24h;
       let max=data24h[0];
     	for (let i = 0; i < data24h.length; i++) {
     		if (data24h[i]>max) {
@@ -323,8 +332,7 @@ export default {
           containLabel: true
         },
         xAxis: [{
-          // data: that.daData.dkeys,
-          data: that.daData.dkeys,
+          data: that.data24hX,
           axisLine: {
             lineStyle: {
               color: '#0095FF',
@@ -427,11 +435,8 @@ export default {
       }
 
       function run(myChart){
-        that.getStat();
-        // console.log('乱序重新绘制', that.daData.dkeys, that.data24h, data24h);
-        // data24h = data24h.sort(function(a,b){
-        //     return Math.random() - 0.5;
-        // });
+        that.getData24h();
+        let data24h = that.data24h;
         let max=data24h[0];
         for (let i = 0; i < data24h.length; i++) {
           if (data24h[i]>max) {
@@ -446,7 +451,7 @@ export default {
         myChart.setOption({
           animation: true,
           xAxis: {
-            data: that.daData.dkeys
+            data: that.data24hX
           },
           series: [{
               type: 'bar',
@@ -658,23 +663,15 @@ export default {
       //     }
       //     return data;
       // }();
-      var xData = ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'];
+      var xData = this.rsqsXData;
       var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
-      var name = ['体育场', '体育馆', '游泳场馆']
-      var data = [
-        [0, 134, 435, 561, 674, 552, 810, 300, 550, 460, 650, 790],
-        [0, 437, 535, 634, 752, 435, 740, 560, 900, 440, 580, 350],
-        [0, 0, 337, 635, 861, 637, 500, 620, 450, 630, 800, 320],
-        // [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
-        // [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
-        // [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
-        // [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
-        // [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
-        // [17.4, 6.1, 13.4, 15.2, 13.7, 5.2],
-      ]
+      var name = this.rsqsDataName= ['体育场', '体育馆', '游泳场馆']
+      console.log(this.rsqsDataName, 'this.rsqsDataName')
+      //  = ['体育场', '体育馆', '游泳场馆'];
+      var data = this.rsqsDataAll;
 
       var series = [];
-      for (var i = 0; i < 6; i++) {
+      for (var i = 0; i < data.length; i++) {
         series.push({
           name: name[i],
           type: "line",
@@ -850,15 +847,36 @@ export default {
         }, 3000);
       }, 200)
     },
-    ty_pie1(){
+    ty_pieDo(){
       let that = this;
+      this.ty_pie("pieChart1",this.groupsData[0]);
+      this.ty_pie("pieChart2",this.groupsData[1]);
+      this.ty_pie("pieChart3",this.groupsData[2]);
+      function run(){
+        that.gethomeBarData();
+        setTimeout(() => {
+          this.ty_pie("pieChart1",this.groupsData[0]);
+          this.ty_pie("pieChart2",this.groupsData[1]);
+          this.ty_pie("pieChart3",this.groupsData[2]);
+        }, 200);
+      }
+      setInterval(function () {
+        run();
+      }, 3000);
+    },
+    ty_pie(ElementId,DD){
+      let that = this;
+      // console.log(num, '------')
+      if(!DD){
+        return;
+      }
       var dataP = [{
-            name: '谷峰差收益',
-            value: 25,
+            name: DD.groupName,
+            value: (DD.proportion.split('%'))[0],
         },
         {
-            name: '充电桩收益',
-            value: 75,
+            name: '/'+DD.groupName,
+            value: 100-((DD.proportion.split('%'))[0]),
         }
       ];
       function hexToRgba(hex, opacity) {
@@ -972,59 +990,11 @@ export default {
         ],
       }
 
-      function run(myChart){
-        // that.getStat();
-        // console.log('乱序重新绘制', that.daData.dkeys, that.data24h, data24h);
-        data24h = data24h.sort(function(a,b){
-            return Math.random() - 0.5;
-        });
-        let max=data24h[0];
-        for (let i = 0; i < data24h.length; i++) {
-          if (data24h[i]>max) {
-            max = data24h[i];
-          }
-        }
-        let dataLenArr = [], dataBGArr = [];
-        data24h.map(item=>{
-          dataLenArr.push(0);// 获取和数据一样长度的底部图形数组；
-          dataBGArr.push(max);// 数组最大值做背景柱形
-        })
-        myChart.setOption({
-          xAxis: {
-            data: that.daData.dkeys
-          },
-          series: [{
-              type: 'bar',
-              data: data24h,
-            },
-            {
-              type: 'scatter',
-              data: dataLenArr
-            },
-            {
-              name: '背景',
-              type: 'bar',
-              data: dataBGArr
-            },
-          ]
-        });
-      }
       // 加延时器使图像绘制获取元素宽高最新的值
       setTimeout(()=>{
-        var pieDom1 = document.getElementById("pieChart1");
+        var pieDom1 = document.getElementById(ElementId);
         var myChart = echarts.init(pieDom1);
         option && myChart.setOption(option);
-
-        var pieDom2 = document.getElementById("pieChart2");
-        var myChart = echarts.init(pieDom2);
-        option && myChart.setOption(option);
-
-        var pieDom3 = document.getElementById("pieChart3");
-        var myChart = echarts.init(pieDom3);
-        option && myChart.setOption(option);
-        // setInterval(function () {
-        //   run(myChart);
-        // }, 3000);
       }, 200)
     },
 
@@ -1041,7 +1011,7 @@ export default {
         Object.values(tmpdata).forEach((value) => {
           datas.push(value.num)
         });
-        that.data24h = datas;
+        // that.data24h = datas;
         const day_tmp=res.data.data.groupsData
         
         //遍历加
@@ -1049,14 +1019,14 @@ export default {
           that.todayNum =+ item.noRepeatInNum
         });
         // 赋值
-        if(day_tmp.length>0){
-          that.cgp_1 = day_tmp[0].proportion
-          that.cgn_1 = day_tmp[0].groupName
-          that.cgp_2 = day_tmp[1].proportion
-          that.cgn_2 = day_tmp[1].groupName
-          that.cgp_3 = day_tmp[2].proportion
-          that.cgn_3 = day_tmp[2].groupName
-        }
+        // if(day_tmp.length>0){
+        //   that.cgp_1 = day_tmp[0].proportion
+        //   that.cgn_1 = day_tmp[0].groupName
+        //   that.cgp_2 = day_tmp[1].proportion
+        //   that.cgn_2 = day_tmp[1].groupName
+        //   that.cgp_3 = day_tmp[2].proportion
+        //   that.cgn_3 = day_tmp[2].groupName
+        // }
 
       })
       // MONTHLY
@@ -1075,6 +1045,88 @@ export default {
       })
 
     },
+    // 24小时趋势
+    getData24h(){
+      let that = this;
+      homeApi.getID().then(res=>{
+          // console.log(res, '=====');
+          let idArr = "";
+          res.data.data.map(item=>{
+            if(item.type==1){
+              idArr += "|"+item.groupId;
+            }
+          })
+          homeApi.getAllfFlow({groupsId:idArr}).then(res=>{
+            // console.log(res, '=====');
+            that.data24h = res.data.data.dvalue;
+            that.data24hX = res.data.data.dkeys;
+        });
+      });
+    },
+    // 人次占比
+    gethomeBarData(){
+      let that = this;
+      homeApi.getID().then(res=>{
+        // console.log(res, '=====');
+        let idArr = "";
+        res.data.data.map(item=>{
+          if(item.type==1){
+            idArr += "|"+item.groupId;
+          }
+        })
+        homeApi.homeBarData({groupsId:idArr}).then(res=>{
+          // console.log(res, '=====');
+          res.data.data.groupsData.forEach(item=>{
+            that.groupsData.push(item);
+          });
+          // console.log(that.groupsData, 'that.groupsData')
+          that.cgn_1 = that.groupsData[0].noRepeatInNum;
+          that.cgp_1 = that.groupsData[0].proportion;
+          that.cgn_2 = that.groupsData[1].noRepeatInNum;
+          that.cgp_2 = that.groupsData[1].proportion;
+          that.cgn_3 = that.groupsData[2]?that.groupsData[2].noRepeatInNum:'';
+          that.cgp_3 = that.groupsData[2]?that.groupsData[2].proportion:'';
+        });
+      });
+    },
+    // 折线趋势图
+    getGcgNumDatas(){
+      let that = this;
+      homeApi.getID().then(res=>{
+        // console.log(res, '=====');
+        let idArr = "";
+        res.data.data.map(item=>{
+          if(item.type==1){
+            idArr += "|"+item.groupId;
+          }
+        })
+        homeApi.allGcgNumDatas({groupsId:idArr}).then(res=>{
+          console.log(res, '=====');
+          const tmpdata = res.data.data;
+          tmpdata.forEach((item) => {
+            that.rsqsDataName.push(item.groupName);
+            that.rsqsDatas.push(item.list)
+          })
+          
+          that.rsqsXData = res.data.data[0].list.dkeys;
+          that.rsqsDatas.forEach((item) => {
+            let rsqsData = []
+            Object.getOwnPropertyNames(item).forEach((value) => {
+              
+              if(value=='dkeys'){
+                
+              }
+              if(value=='dvalue'){
+                // console.log(item, value, '-----')
+                // rsqsData.push(item[value])
+                rsqsData = item[value];
+              }
+            });
+            that.rsqsDataAll.push(rsqsData)
+          })
+        });
+      });
+    },
 
     // 动画加数从效果
     addNumber(start, end, id) {
@@ -2092,7 +2144,9 @@ export default {
     overflow: visible !important;
     margin: 0px 0.57rem 0px 0.57rem !important;
     box-sizing: border-box !important;
-    transform-origin: center top !important;
+    // transform-origin: center top !important;
+    transform: scale(1) !important;
+    // animation: animationB 1s ease-in-out 3s;
   }
 }
 #ty{