<template>
  <div class="home">
    <div class="topnav">总览</div>
    <!-- 图片 -->
    <div class="gymbox">
      <div class="gympic">
        <img src="../assets/img/gymbg.png" />
      </div>
      <div class="gymnum">
        <span>年度进馆总人数</span>
        <p id="ycdn">{{ year_num }}</p>
      </div>
    </div>
    <!-- 今日进馆 -->
    <div class="numbox">
      <span class="numicon"><img src="../assets/img/icon01.png" /></span>
      <div class="numdiv">
        <p class="ndtitle" id="dynum">{{ day_num }}</p>
        <p class="nddesc">今日进馆总人数</p>
      </div>
    </div>
    <!-- 本周进馆 -->
    <div class="numbox">
      <span class="numicon"><img src="../assets/img/icon02.png" /></span>
      <div class="numdiv">
        <p class="ndtitle" id="wknum">{{ week_num }}</p>
        <p class="nddesc">本周进馆总人数</p>
      </div>
    </div>
    <!-- 本月进馆 -->
    <div class="numbox">
      <span class="numicon"><img src="../assets/img/icon03.png" /></span>
      <div class="numdiv">
        <p class="ndtitle" id="mnum">{{ mon_num }}</p>
        <p class="nddesc">本月进馆总人数</p>
      </div>
    </div>

    <!-- 客流趋势 -->
    <div class="klqs">
      <div class="klqs_bg">客流趋势</div>
      <div class="klbtn">
        <span :class="klselt == 'y' ? 'spactive' : ''" @click="selitem('y')">年</span>
        <span :class="klselt == 'm' ? 'spactive' : ''" @click="selitem('m')">月</span>
        <span :class="klselt == 'd' ? 'spactive' : ''" @click="selitem('d')">日</span>
      </div>

    </div>
    <div class="echartzone" id="showorders" style='width:100%;height:14rem;'></div>

    <!-- 场馆饱和度 -->
    <div class="cgbox">
      <!-- 左侧 -->
      <div class="cglist cgleft">
        <ul>
          <li>
            <span style="width: 38%">{{ circularData.groupName[0] }}</span>
            <span>{{ circularData.proportion[0] }}</span>
            <span style="width: 0.68rem;"><img src="../assets/img/tyc_icon.png" /></span>
          </li>
          <li>
            <span style="width: 38%">{{ circularData.groupName[1] }}</span>
            <span>{{ circularData.proportion[1] }}</span>
            <span style="width: 0.68rem;"><img src="../assets/img/tyg_icon.png" /></span>
          </li>
          <li>
            <span style="width: 38%">{{ circularData.groupName[2] }}</span>
            <span>{{ circularData.proportion[2] }}</span>
            <span style="width: 0.68rem;"><img src="../assets/img/yyg_icon.png" /></span>
          </li>
        </ul>
      </div>
      <!-- 場館圖表 -->
      <div id="cgchart" class="cgpies"></div>
      <!-- 右侧 -->
      <div class="cglist cgright">
        <ul>
          <li>
            <span style="width: 0.68rem;"><img src="../assets/img/tsg_icon.png" /></span>
            <span>{{ circularData.proportion[3] }}</span>
            <span style="width: 38%">{{ circularData.groupName[3] }}</span>
          </li>
          <li>
            <span style="width: 0.68rem;"><img src="../assets/img/whg_icon.png" /></span>
            <span>{{ circularData.proportion[4] }}</span>
            <span style="width: 38%">{{ circularData.groupName[4] }}</span>
          </li>
          <li>
            <span style="width: 0.68rem;"><img src="../assets/img/bwg_icon.png" /></span>
            <span>{{ circularData.proportion[5] }}</span>
            <span style="width: 38%">{{ circularData.groupName[5] }}</span>
          </li>
        </ul>
      </div>

    </div>

    <!-- 今日场馆人数 -->
    <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="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"
          :class="[{ pcrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90 }, { pcrate3: parseInt(item.proportion) >= 90 },'pcani']">{{
            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>
</template>

<script>
import * as echarts from 'echarts';
import * as btApi from '../api/home'

// 数字变化效果
import { numGrow,ecMaxVal,numberGrow} from '@/utils/comm';

// 引入api
import * as homeApi from '@/api/home'
let ws = null;
export default {
  name: 'HomeView',
  data() {
    return {
      // 年月日选中的样式,默认日
      klselt: "d",
      // 客流标题数组
      kltdata: [],
      // 客流值数组
      klvdata: [],
      //  环图数据
      kcdata:[],
      // 环形的比例值
      // tyc
      tycra:[],
      //tyg
      tygra:[],
      //yyg
      yygra:[],
      // bwg
      bwgra:[],
      circularData: {groupName:[],proportion:[]},

      day_num: 0,
      week_num: 0,
      mon_num: 0,
      year_num: 0,
      // 客流趋势
      klqsDatas: [],
      // 实时进馆人数
      ssjgNumDatas: [],

      //折线区域的数据
      zxliddata:[],
      // 折线名称
      zxlindata:[],

      //websocket 
      wsobj:null,
      // 心跳
      wsheart:false,
      // reconect time
      reconntime:0,
    }
  },
  // created() {
  //   //  初始化ws 链接
  //   this.getsckdata();
  // },
  mounted() {
    // 客流趋势
    this.btgetdata(this.klselt)
    // 各场馆客流趋势
    this.getGcgNumDatas()
    //统计日月年进馆总数
    this.getStat();
    //
    // get data in webscoket 
    this.getsckdata();
    
  },
  // 方法
  methods: {
    // 获取对应的参数
    btgetdata(type) {
      let nrq;
      switch (type) {
        case 'd': nrq = "daily"; break;
        case 'm': nrq = "monthly"; break;
        case 'y': nrq = "yearly"; break;
        default:nrq="daily";break;
      }
      //return nrq;
      this.getDataIn(nrq)
    },
    
    // 获取不同时期的数据
    getDataIn(reqType){
      let that = this;
      //
      btApi.allGroupTimeNum({ 'granularity': reqType }).then(res => {
        const kldata = res.data.data.allTimeData
        // 对应的键名
        let kltd = new Array;
        let tmpkvd = new Array;
        const dkeys = res.data.data.dkeys
        dkeys.forEach(function (item, idx) {
          kltd.push(item)
          tmpkvd.push(kldata[item].num)
        })

        // 赋值
        this.kltdata = kltd
        this.klvdata = tmpkvd
        // 圆柱
        this.showorders()
        // 环图数据
        const ccdata = res.data.data.groupsData
        let tcdata =new Array;that.circularData.groupName=[];that.circularData.proportion=[];
        ccdata.forEach(function(item,idx){
          // idx
          tcdata.push({
            // value: item.proportion,
            value: item.noRepeatInNum,
            name: item.groupName
          })
          that.circularData.groupName.push(item.groupName)
          that.circularData.proportion.push(item.proportion)
        });
        //
        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]

      });
    },

    //选择年月日中的某个
    selitem(type) {
      this.klselt = type;
      // this.btgetdata(type)
    },
    // 圆柱图
    showorders() {
      // 基于准备好的dom，初始化echarts实例
      var chartDom = document.getElementById('showorders');
      var myChart = echarts.init(chartDom);
      // 指定图表的配置项和数据
      var option;

      //var cdata = [100, 200, 100, 200, 100, 200, 250, 50, 30, 130, 150, 110, 120]
       var cdata = this.klvdata.slice(-8,this.klvdata.length)
      // var data = [Math.random() * 300]
      option = {
        // backgroundColor: '#031245',
        color: [
          '#63caff',
          '#49beff',
          '#03387a',
          '#03387a',
          '#03387a',
          '#6c93ee',
          '#a9abff',
          '#f7a23f',
          '#27bae7',
          '#ff6d9d',
          '#cb79ff',
          '#f95b5a',
          '#ccaf27',
          '#38b99c',
          '#93d0ff',
          '#bd74e0',
          '#fd77da',
          '#dea700',
        ],
        grid: {
          containLabel: true,
          left: 20,
          right: 20,
          bottom: 10,
          top: 40,
        },
        xAxis: {
          axisLabel: {
            color: '#FFFFFF',
            fontSize: 10,
            interval: 0,
            rotate: 45,
            // show: true,
            // inside:false
          },
          axisTick: {
            lineStyle: {
              color: '#384267',
            },
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#0095FF',
              width: 1,
              type: 'solid',
            },
            show: true,
          },
          data: this.kltdata.slice(-8,this.kltdata.length),
          type: 'category',
        },
        yAxis: {
          // show:false,
          axisLabel: {
            color: '#0095FF',
            fontSize: 14,
          },
          axisTick: {
            lineStyle: {
              color: '#0095FF',
              width: 1,
            },
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#0095FF',
              type: 'solid',
            },
          },
          // 坐标轴显示状况
          axisLine: {
            lineStyle: {
              color: '#0095FF',
              width: 1,
              type: 'solid',
            },
            show: false,
          },
          name: '',
        },
        series: [
          {
            data: cdata,
            type: 'bar',
            barMaxWidth: 'auto',
            barWidth: 15,

            itemStyle: {
              normal: {
                color: function () {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                    { offset: 0, color: "#00B4FF" },
                    { offset: 1, color: "#2F00FF" }
                  ], false)
                },
                label: {
                  show: false,//柱状上的数据
                }
              },

            },
            label: {
              show: true,
              position: 'top',
              distance: 15,
              color: '#fff',
            },
          },
          {
            data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            type: 'bar',
            barMaxWidth: '15',
            symbol: 'circle',
            symbolOffset: [0, '50%'],
            symbolSize: [10, 5],
            color: '#fff',
          },
          {
            data: cdata,
            type: 'pictorialBar',
            barMaxWidth: '15',
            symbolPosition: 'end',
            symbol: 'circle',
            symbolOffset: [0, '-50%'],
            symbolSize: [15, 7],
            zlevel: 2,
          },
          // 背景柱子的数值
          {
            data: ecMaxVal(cdata),
            type: 'bar',
            barMaxWidth: 'auto',
            barWidth: 15,
            barGap: '-100%',
            zlevel: -1,

            itemStyle: {
              normal: {
              },
            }
          },
          {
            data: [1, 1, 1, 1, 1, 1, 1, 1],
            type: 'pictorialBar',
            barMaxWidth: '15',
            symbol: 'circle',
            symbolOffset: [0, '50%'],
            symbolSize: [15, 7],
            zlevel: -2,
          },
          {
            data:ecMaxVal(cdata),
            //data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
            type: 'pictorialBar',
            barMaxWidth: '15',
            symbolPosition: 'end',
            symbol: 'circle',
            symbolOffset: [0, '-50%'],
            symbolSize: [15, 7],
            zlevel: -1,
            itemStyle: {
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 15
            }
          },
        ],

        // // 动画效果
        // animation:true,
        // animationDuration:0,
        // animationDurationUpdate:300,
        animationEasing:"linear",
        animationEasingUpdate:"linear"

      };

      option && myChart.setOption(option);
    },

    // 圆饼图
    cgchart() {
      var chartDom = document.getElementById('cgchart');

      chartDom.removeAttribute('_echarts_instance_');
      var myChart = echarts.init(chartDom);
      var option;

      option = {

        // color: ["#F2A0CE", "#0780e2", "#FF6504", "#01FE00", "#00FFFF", "#fdff00"],
        color: ['#ff9acc', '#6666ff', '#a9eeff', '#02ff00','#00ffff', '#fdff00'],

        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['70%', '80%'], //曲线范围
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 40,
              // borderColor: '#fff',
              borderWidth: 1
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.kcdata
          }
        ]
      };

      option && myChart.setOption(option);
    },

    // 场馆入场人数折线图
    cgrs_line() {

      var chartDom = document.getElementById('tdrs');
      var myChart = echarts.init(chartDom);
      var option;

      var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
      var name = []

      var xData = this.zxlindata
      var data = this.zxliddata
      var series = [];
      // loop data
      for (var i = 0; i < 6; i++) {
        series.push({
          name: name[i],
          type: "line",
          symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
          symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
          smooth: true, //是否平滑曲线显示
          showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: color[i]
              }, {
                offset: 0.8,
                color: 'rgba(255,255,255,0)'
              }], false),
              // shadowColor: 'rgba(255,255,255, 0.1)',
              shadowBlur: 10,
              opacity: 0.3,
            }
          },
          itemStyle: {
            normal: {
              color: color[i],
              lineStyle: {
                width: 1,
                type: 'solid' //'dotted'虚线 'solid'实线
              },
              borderColor: color[i], //图形的描边颜色。支持的格式同 color
              borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] 
              barBorderRadius: 0,
              label: {
                show: false,
              },
              opacity: 0.5,
            }
          },
          data: data[i],

        })
      }
      // contruct
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              color: '#57617B'
            }
          },
          formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}<br />{a3}: {c3}<br />{a4}: {c4}<br />{a5}: {c5}',
          backgroundColor: 'rgba(0,0,0,0.7)', // 背景
          padding: [8, 10], //内边距
          extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
        },
        grid: {
          borderWidth: 0,
          top: 160,
          bottom: 160,
          right: 20,
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: [{
          type: "category",
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#0B0765',
            }
          },
          boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
          axisTick: {
            show: false
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            inside: false,
            textStyle: {
              color: '#FFFFFF',
              fontWeight: 'normal',
              fontSize: '12',
            },
          },
          data: xData,
        }],
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#0B0765 ',
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#0B0765 ',
            }
          },
          axisLabel: {
            textStyle: {
              color: '#0095FF',
              fontWeight: 'normal',
              fontSize: '12',
            },
            formatter: '{value}',
          },
        },
        series: series,
      }

      option && myChart.setOption(option);

    },

    // 统计概况
    getStat() {
      let that = this
      homeApi.allGroupNum().then(res => {
        // get allTimeData
        const tmpdata = res.data.returnData
        // that.day_num = tmpdata.day.noRepeatInNum
        // that.week_num = tmpdata.week.noRepeatInNum
        // that.mon_num = tmpdata.month.noRepeatInNum
        // that.year_num = tmpdata.year.noRepeatInNum

        //年度总人数
        const ycount= tmpdata.year.noRepeatInNum
        numGrow("ycdn",ycount);
        //今日
        numGrow("dynum",tmpdata.day.noRepeatInNum)
        // week
        numGrow("wknum",tmpdata.week.noRepeatInNum)
        // month
        numGrow("mnum",tmpdata.month.noRepeatInNum)
      });
    },

    // 获取实时进馆数据
    getInfoDatas() {
      // interface
      homeApi.tdGroupRealTimeEnter().then(res=>{
        this.ssjgNumDatas = res.data.returnData
      })
    },

    // udp
    getsckdata(){
      let that = this;
      // websocket 
      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);
        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 => {
        // get allTimeData
        const tmpdata = res.data.data
        // X 轴的名称字段
        const xarr =new Array
        const darr =new Array;
        tmpdata.forEach(function(item,idx){
          // 读取list
          const list = item.list
          xarr.push(list.dkeys)
          darr.push(list.dvalue)
        })

        // console.log(darr)

        this.zxlindata = xarr
        this.zxliddata = darr

        // 场馆人流趋势线面图
        this.cgrs_line();
      });
    }

  },
  beforeUnmount(){
    ws.close();
  }

}
</script>

<style scoped>
.home {
  position: relative;
}

.topnav {
  height: 46px;
  line-height: 46px;
  text-align: center;
  padding: 12rpx;
  width: 100%;
  position: fixed;
  z-index: 90;
  color: #fff;
  left: 0;
  top: 0;
  /* background-color: #080A25; */
  background-color: #032461;
  box-shadow: 0px 3px 4px 0px rgba(255, 255, 255, 0.1);
  margin-bottom: 30rpx;
}

.gymbox {
  margin-top: 3.2rem;
  width: 100%;
  background-image: url("../assets/img/gymbox_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  padding-top: 2.26rem;
  height: 20rem;
  position: relative;
}

.gymbox .gympic {
  margin-left: auto;
  margin-right: auto;
  padding-top: 0rem;
  /* height: 12.68rem; */
  width: 100%;
  /* 动画效果 */
  -webkit-animation: ani_gym 4s infinite forwards;
  animation: ani_gym 4s infinite forwards;  
}
@keyframes ani_gym {
  0% {
    opacity: 1;
    margin-top: 0%;
  }
  25% {
    opacity: 0.7;
    margin-top: 3%;
  }
  50% {
    opacity: 0.5;
    margin-top: 5%;
  }
  75% {
    opacity: 0.7;
    margin-top: 3%;
  }
  100% {
    opacity: 1;
    margin-top: 0%;
  }
}

.gymbox .gympic img {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  /* margin-top: 1rem; */
  display: block;
  /* padding-top: 0.2rem; */
  height: 16rem;
}

.gymbox .gymnum {
  width: 100%;
  /* margin: 0.6rem auto; */
  text-align: center;
  height: 3rem;
  position: absolute;
  bottom: 2rem;
  /* padding-top: 0.7rem; */
}

.gymbox .gymnum span {
  font-size: 0.86rem;
  display: block;
  line-height: 1.2rem;
}

.gymbox .gymnum p {
  line-height: 26px;
  height: 26px;
  font-size: 18px;
  font-weight: 600;
  display: block;
  margin: 0;
  margin-top: 0.5rem;
  /* margin: 0.5rem 0 1.7rem; */
}

/* 數據box */
.numbox {
  width: 100%;
  height: 4rem;
  line-height: 1.2;
  margin-top: 0.6rem;
}

.numbox .numicon {
  display: block;
  width: 20%;
  height: 3.2rem;
  float: left;
  width: 5rem;
  height: 4rem;
}
.numbox .numicon img{
  width: 100%;
  height: 100%;
  margin-top: 0.7rem;
}

.numbox .numdiv {
  width: 72%;
  background-image: url("../assets/img/num_bg.png");
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: 100%;
  float: left;
  margin-left: 0.68rem;
  height: 4rem;
  text-align: center;
}

.numbox .numdiv p {
  display: block;
  float: left;
  width: 100%;
  /* line-height: 0; */
}

.numbox .numdiv .ndtitle {
  padding-top: 0.2rem;
  font-size: 1.08rem;
  font-size: 1.1rem;
  margin: 0.7rem 0 0;
}

.numbox .numdiv .nddesc {
  color: #ccc;
  font-size: 0.9rem !important;
  /* padding-bottom: 0.2rem; */
  margin: 0;
}

/** 客流趋势 */
.klqs {
  margin-top: 2rem;
  background-image: url("../assets/img/klqs_bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 3.8rem;
  background-position: -1.04rem 0.2rem;
}

.klqs .klqs_bg {
  float: left;
  /* width: 80%; */
  margin-left: 5rem;
  /* padding-left: 6.4rem; */
  line-height: 2.8rem;
  font-size: 1.1rem;
  color: #999;
}

.klqs .klbtn {
  float: right;
  margin-left: 1.06rem;
  margin-right: 1rem;
}

.klqs .klbtn span {
  display: block;
  float: left;
  width: 2.2rem;
  height: 2.2rem;
  margin-left: 0.4rem;
  line-height: 2.2rem;
  text-align: center;
  border: 1px solid #006bff;
  cursor: pointer;
}

/* 选择年月日后的样式变化 */
.klqs .klbtn span.spactive {
  background-image: url('../assets/img/sactive_bg.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0;
}

/**  場館飽和度 */
.cgbox {
  background-image: url("../assets/img/cgbox_bg.png");
  width: 100%;
  height: 12rem;
  background-position: center center;
  background-size: 100% 100%;
  margin-top: 2.4rem;
}

/* 饼图 */
.cgbox .cgpies {
  width: 34%;
  height: 12rem;
  float: left;
}

.cgbox .cgleft {
  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: 33%;
  /* height: 12rem; */
  float: left;
}

.cgbox .cgright>ul {
  padding-left: 0.2rem;
}

.cgbox .cglist {
  margin-top: 3rem;
}

.cgbox .cglist ul {
  display: block;
  /* width: 100%; */
}

.cgbox .cglist ul li {
  width: 100%;
  list-style: none;
  height: 0.66rem;
  line-height: 0.66rem;
  font-size: 0.66rem;
  margin-top: 1rem;
  display: flex;
  justify-content: space-around;
}

.cgbox .cglist ul li span {
  display: block;
  float: left;
  width: 30%;
  /* margin-left: 0.46rem; */
}

/* .cgbox .cgleft ul li:nth-child(3) span:nth-child(2) {
  display: block;
  float: left;
  margin-left: 0.06rem;
}

.cgbox .cgleft ul li:nth-child(3) span:nth-child(3) {
  display: block;
  float: left;
  margin-left: 0.16rem;
} */

.cgbox .cglist ul li span img {
  width: 0.68rem;
  height: 0.68rem;
}

/* 今日人數 */
.today_rs {
  margin-top: 1rem;
  width: 100%;
}

.today_rs .tdrs_title {
  background-image: url("../assets/img/left_t2_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: -1.04rem 0.2rem;
  height: 3.2rem;
  line-height: 3.5rem;
  padding-left: 5rem;
  font-size: 1.1rem;
  color: #999;
  padding-bottom: 1rem;
}

/** 各場館實時 */
.pcgrs {
  clear: both;
  margin-top: 2.6rem;
  width: 100%;
  display: inline-block;/**撑开高度 */
}

.pcgrs .pcgrs_title {
  background-image: url("../assets/img/left_t3_bg.png");
  background-repeat: no-repeat;
  background-size: 100%;
  height: 3.8rem;
  line-height: 2.8rem;
  background-position: -1.04rem 0.2rem;
  padding-left: 5.5rem;
  font-size: 1.1rem;
  color: #999;
}

.pcgrs .pcg_item {
  margin-top: 0.4rem;
  background-image: url("../assets/img/pcg_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* height: 12rem; */
  width: 48%;
  float: left;
  margin-left: 2%;
  position: relative;
  margin-bottom: 1.6rem;
}

.pcgrs .pcg_item .pcpos {
  text-align: right;
  font-size: 0.68rem;
  display: block;
  /* width: 3.5rem; */
  text-align: left;
  float: right;
  margin-top: 1.6rem;
  margin-right: 1.1rem;
  /* padding-right: 0.9rem; */
  color: #3E96F7;
}

.pcgrs .pcg_item .pcval {
  font-size: 1.086rem;
  margin-top: 3.75rem;
  width: 69%;
  display: block;
  float: left;
  text-align: left;
  margin-left: 2rem;
}

/** 数据动态绑定后持续动画效果 */
.pcgrs .pcg_item .pcani{
  /* 动画效果 */
  -webkit-animation: ani_txt 8s infinite linear;
  animation: ani_txt 8s infinite linear;  
}

@keyframes ani_txt {
  0%{
    text-shadow: 0 0 0 30px #fff;
  }
  40%{
    color:rgba(255, 255, 255, 0);
    text-shadow: 0 0 0 30px #fff;
  }
  70%{
    color:rgba(255, 255, 255, 0.4);
    text-shadow: 0 0 0 10px #fff;
  }
  90%{
    color:rgba(255, 255, 255, 0.5);
    text-shadow: 0 0 0 30px #fff;
  }
  100%{
    text-shadow: 0 0 0 40px #fff;
  }
}

/* .pcgrs .pcg_item:nth-child(6) .pcval {
  font-size: 1.086rem;
  margin-top: 3.5rem;
  width: 66%;
  display: block;
  float: left;
  text-align: center;
} */
.pcgrs .pcg_item .rbtitle{
  position: absolute;
  top: 2.7rem;
  left: 2rem;
  font-size: 0.2rem;
}
.pcgrs .pcg_item .rbrate0 {
  /* width: 32%; */
  width: 3.4rem;
  height: 3.4rem;
  line-height: 3.4rem;
  display: block;
  float: left;
  font-size: 0.46rem;
  margin-top: 3.78rem;
  text-align: center;
  position: absolute;
  bottom: 0.4rem;
  right: 0.63rem;
}

.pcgrs .pcg_item .rbrate2 {
  background-image: url('../assets/img/2.png');
  background-size: 100% 100%;
}

.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>