<template>
  <v-scale-screen width="1920" height="1080">
    <div id="index">
      <!-- 左边 -->
      <div class="leftbox">
        <!-- 客流 -->
        <div class="keliu">
          <span class="kliu_title">客流趋势</span>
          <div class="kliu_st">
            <span id="yitem" :class="klselt == 'y' ? 'spactive' : ''" @click="selitem('y')">年</span>
            <span id="mitem" :class="klselt == 'm' ? 'spactive' : ''" @click="selitem2('m')">月</span>
            <span id="ditem" :class="klselt == 'd' ? 'spactive' : ''" @click="selitem3('d')">日</span>
          </div>
          <!-- 柱状图 -->
          <div class="tongjitu" id="homebar" style="height: 230px; width: 100%;">
            <!-- 柱图，注意样式 -->
          </div>
          <!-- 几大场馆预警图 -->
          <div class="cgflow">
            <!-- 左边的流量预警  -->
            <div class="cgflow_leftbox">
              <!-- 体育场的流量预警 -->
              <div class="cgfitem">
                <span class="cgtitle">体育场</span>
                <span class="cgval">20%</span>
                <span class="cgimg"><img src="../assets/index/tyc_icon.png" /></span>
              </div>
              <!-- 体育馆 -->
              <div class="cgfitem">
                <span class="cgtitle">体育馆</span>
                <span class="cgval">20%</span>
                <span class="cgimg"><img src="../assets/index/tyg_icon.png" /></span>
              </div>
              <!-- 游泳馆 -->
              <div class="cgfitem">
                <span class="cgtitle">游泳场馆</span>
                <span class="cgval">20%</span>
                <span class="cgimg"><img src="../assets/index/yyg_icon.png" /></span>
              </div>
            </div>
            <!-- 右边流量预警 -->
            <div class="cgflow_rightbox">
              <!-- 图书馆 -->
              <div class="cgfitem">
                <span class="cgimg"><img src="../assets/index/tsg_icon.png" /></span>
                <span class="cgval">20%</span>
                <span class="cgtitle">图书馆</span>
              </div>
              <!-- 文化馆 -->
              <div class="cgfitem">
                <span class="cgimg"><img src="../assets/index/whg_icon.png" /></span>
                <span class="cgval">20%</span>
                <span class="cgtitle">文化馆</span>
              </div>
              <!-- 博物馆 -->
              <div class="cgfitem">
                <span class="cgimg"><img src="../assets/index/bwg_icon.png" /></span>
                <span class="cgval">20%</span>
                <span class="cgtitle">博物馆</span>
              </div>
            </div>
          </div>

          <!-- 今日各场馆人数趋势 -->
          <div class="gcgqs">
            <div class="gcg_title">今日各场馆人数趋势</div>
            <div id="kl-line" style="width: 100%; height: 20vh"></div>
          </div>

        </div>
      </div>
      <!-- 中间 -->
      <div class="centerbox">
        <!-- 今日进馆人数 -->
        <div class="jgrs">
          <span id="jgval1" class="jgval jgval1">{{ day_num }}</span>
          <span class="jgdesc jgdesc1">今日进馆人数</span>
        </div>
        <!-- 本周进馆人数 -->
        <div class="jgrs">
          <span id="jgval2" class="jgval">{{ week_num }}</span>
          <span class="jgdesc">本周进馆人数</span>
        </div>
        <!-- 本月进馆人数 -->
        <div class="jgrs">
          <span id="jgval3" class="jgval jgval3">{{ mon_num }}</span>
          <span class="jgdesc jgdesc3">本月进馆人数</span>
        </div>
        <!-- 会动的体育馆image -->
        <div class="tygpic"><img src="../assets/index/zt.png" /></div>
        <!-- 年度进馆人数 -->
        <div class="ndjgrs">
          <span class="nddesc">年度进馆人数</span>
          <span class="ndval">{{ year_num }}</span>
        </div>
      </div>
      <!-- 右边 -->
      <div class="rbox">
        <div class="rbox_title">各场馆实施实时进馆人数</div>
        <div class="rbox_con">
          <!-- 各场馆实时人数 cg1 -->
          <!-- v-for="(item, index) in 6" :key="index" -->
          <div class="rbitem" v-for="item in ssjgNumDatas" :key="item.groupId">
            <span class="rbcgname">体育场</span>
            <span class="rbtitle">当前人数</span>
            <!-- <span class="rbval">4,738</span> -->
            <span class="rbval">{{ item.allEnter }}</span>
            <span class="rbrate" :class="[{rbrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90},{rbrate3: parseInt(item.proportion) >= 90 }]">{{ item.proportion }}</span>
          </div>

          <!-- <div class="rbitem">
            <span class="rbcgname">图书馆</span>
            <span class="rbtitle">当前人数</span>
            <span class="rbval">4,738</span>
            <span class="rbrate">50%</span>
          </div>

          <div class="rbitem">
            <span class="rbcgname">体育馆</span>
            <span class="rbtitle">当前人数</span>
            <span class="rbval">4,738</span>
            <span class="rbrate">80%</span>
          </div>

          <div class="rbitem">
            <span class="rbcgname">文化馆</span>
            <span class="rbtitle">当前人数</span>
            <span class="rbval">4,738</span>
            <span class="rbrate">25%</span>
          </div>

          <div class="rbitem">
            <span class="rbcgname">游泳场馆</span>
            <span class="rbtitle">当前人数</span>
            <span class="rbval">4,738</span>
            <span class="rbrate">90%</span>
          </div>

          <div class="rbitem">
            <span class="rbcgname">博物馆</span>
            <span class="rbtitle">当前人数</span>
            <span class="rbval">4,738</span>
            <span class="rbrate">75%</span>
          </div> -->

        </div>
      </div>

    </div>
  </v-scale-screen>
</template>
<script>
// 引入echarts
import * as echarts from "echarts";

// 引入api
import * as homeApi from '@/api/home'

export default {
  data() {
    return {
      // 年月日选中的样式,默认日
      klselt: "d",
       // 客流标题数组
       kltdata: [],
      // 客流值数组
      klvdata: [],
      day_num: 0,
      week_num: 0,
      mon_num: 0,
      year_num: 0,
      klqsDatas: [],
      ssjgNumDatas: []
    };
  },
  //创建的时候修改背景图片
  created() {
    let cc = window.document.getElementById("app");
    // 清除其他多余的classname
    let len = cc.classList.length;

    if (len > 1) {
      cc.className = "btgym page_bg";
    }
  },
  mounted() {
    // 首页线图
    this.home_bar();
    // 折线图
    this.line_zone();

    // this.addNumber(0, 345235, 'jgval1');
    // this.addNumber(0, 345235, 'jgval2');
    // this.addNumber(0, 345235, 'jgval3');
    this.getStat();
    this.getHomeBarData();
    this.getInfoDatas();
    this.getGcgNumDatas()
    // this.selitem('y')
  },
  methods: {
    btgetdata() {
      // console.log(type)
      // let rqtp;
      // switch (type) {
      //   case 'd': rqtp = "daily"; break;
      //   case 'm': rqtp = "monthly"; break;
      //   case 'y': rqtp = "yearly"; break;
      // }
      // console.log(rqtp);
      //
      homeApi.allGroupTimeNum().then(res => {
        console.log(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
      });
    },
    btgetdata2() {
      //
      homeApi.allGroupTimeNum2().then(res => {
        console.log(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
      });
    },
    btgetdata3() {
      //
      homeApi.allGroupTimeNum3().then(res => {
        console.log(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
      });
    },
    //选择年月日中的某个
    selitem(type) {
      console.log('1111111111');
      console.log(type);
      this.klselt = type;
      this.btgetdata()
    },
    selitem2(type) {
      console.log('1111111111');
      console.log(type);
      this.klselt = type;
      this.btgetdata2()
    },
    selitem3(type) {
      console.log('1111111111');
      console.log(type);
      this.klselt = type;
      this.btgetdata3()
    },

    // 透明背景柱状统计图
    home_bar() {
      var chartDom = document.getElementById("homebar");
      var myChart = echarts.init(chartDom);
      var option;


      // 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'];

      var data = [100, 200, 100, 200, 100, 200, 250, 50, 30, 130, 150, 110, 120]
      // var data = this.klqsDatas
      // 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: 30,
          right: 0,
          bottom: 0,
          top: 60,
        },
        xAxis: {
          axisLabel: {
            color: '#FFFFFF',
            fontSize: 12,
            interval: 0,
            // show: false,
          },
          axisTick: {
            lineStyle: {
              color: '#384267',
            },
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#0095FF',
              width: 1,
              type: 'solid',
            },
            show: true,
          },
          data: ['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'],
          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: data,
            type: 'bar',
            barMaxWidth: 'auto',
            barWidth: 15,
            // backgroundStyle: {
            //   showBackground: true,
            //   borderColor: '#B03A5B',
            //   shadowColor: 'rgba(42, 18, 255,0.5)',
            //   shadowBlur: 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,//柱状上的数据
                }
              },

              // color: {
              //   x: 0,
              //   y: 0,
              //   x2: 0,
              //   y2: 1,
              //   type: 'linear',
              //   global: false,
              //   colorStops: [
              //     {
              //       offset: 0,
              //       color: '#0b9eff',
              //     },
              //     {
              //       offset: 1,
              //       color: '#63caff',
              //     },
              //   ],
              // },
            },
            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: data,
            type: 'pictorialBar',
            barMaxWidth: '15',
            symbolPosition: 'end',
            symbol: 'circle',
            symbolOffset: [0, '-50%'],
            symbolSize: [15, 7],
            zlevel: 2,
          },
          {
            data: [300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300, 300],
            type: 'bar',
            barMaxWidth: 'auto',
            barWidth: 15,
            barGap: '-100%',
            // barGap: '40%',
            zlevel: -1,

            // backgroundStyle: {
            //   showBackground: true,
            //   borderColor: '#B03A5B',
            //   shadowColor: 'rgba(42, 18, 255,0.5)',
            //   shadowBlur: 15
            // },
            itemStyle: {
              normal: {
                // color: function () {
                //   return new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                //     { offset: 0, color: "#00B4FF" },
                //     { offset: 1, color: "#2F00FF" }
                //   ], false)
                // },

                // color:'rgba(8, 15, 56,1)'
              },
            }
          },
          {
            data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            type: 'pictorialBar',
            barMaxWidth: '15',
            symbol: 'circle',
            symbolOffset: [0, '50%'],
            symbolSize: [15, 7],
            zlevel: -2,
          },
          {
            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
            }
          },
        ],
        tooltip: {
          show: "true",
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,0.7)', // 背景
          padding: [8, 10], //内边距
          textStyle: {
            color: '#fff'
          },
          extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
          formatter: function (params) {
            if (params.seriesName != "") {
              return params.name + ' : 有 ' + params.value + ' 人';
            }
          },
        },
      };


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

    // 大面积折线图
    // line_zone() {
    //   var chartDom = document.getElementById("kl-line");
    //   var myChart = echarts.init(chartDom);
    //   var option;

    //   let base = +new Date(2022, 9, 3);
    //   let oneDay = 24 * 3600 * 1000;
    //   let date = [];
    //   let data = [Math.random() * 300];
    //   for (let i = 1; i < 20000; i++) {
    //     var now = new Date((base += oneDay));
    //     date.push(
    //       [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
    //     );
    //     data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
    //   }
    //   option = {
    //     xAxis: {
    //       type: "category",
    //       boundaryGap: false,
    //       data: date,
    //     },
    //     yAxis: {
    //       type: "value",
    //       boundaryGap: [0, "100%"],
    //       //网格线
    //       splitLine: {
    //         lineStyle: {
    //           type: "soild",
    //           color: "#2F00FF",
    //         },
    //       },
    //     },

    //     series: [
    //       {
    //         name: "Fake Data",
    //         type: "line",
    //         symbol: "none",
    //         sampling: "lttb",
    //         itemStyle: {
    //           color: "rgb(255, 170, 131)",
    //         },
    //         areaStyle: {
    //           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //             {
    //               offset: 0,
    //               color: "rgba(255, 158, 68,0.6)",
    //             },
    //             {
    //               offset: 1,
    //               color: "rgb(255, 70, 131,0.6)",
    //             },
    //           ]),
    //         },
    //         data: data,
    //       },
    //     ],
    //   };

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

    line_zone() {
      var chartDom = document.getElementById("kl-line");
      var myChart = echarts.init(chartDom);
      var option;

      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'];
      var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
      var name = []
      var data = [
        [137, 34, 135, 161, 74, 152, 110, 100, 150, 137, 34, 135, 161],
        [174, 137, 135, 34, 152, 135, 140, 160, 100, 174, 137, 135, 34],
        [134, 74, 137, 135, 161, 137, 300, 220, 250, 134, 74, 137, 135],
        [147, 134, 155, 131, 174, 122, 140, 160, 150, 127, 134, 175, 161],
        [124, 147, 175, 134, 122, 175, 180, 110, 130, 154, 187, 125, 134],
        [154, 174, 157, 175, 121, 157, 200, 250, 280, 134, 174, 157, 175],
        // [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 series = [];
      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],

        })
      }
      option = {
        // backgroundColor: "#141f56",
        legend: {
          top: 0,
          right: 0,
          bottom: 0,
          itemGap: 15,
          itemWidth: 15,
          textStyle: {
            color: '#fff',
            fontSize: '14'
          },
          data: name
        },
        title: {
          // text: "负面言论分领域趋势",
          textStyle: {
            color: '#fff',
            fontSize: '22',
            fontWeight: 'normal',
          },
          subtextStyle: {
            color: '#90979c',
            fontSize: '16',

          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              color: '#57617B'
            }
          },
          formatter: '{b}<br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}',
          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: 15,
          left: 50,
          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);
    },

    addNumber(start, end, id) {
      var o = document.getElementById(id);
      var i = start;
      var Interval;
      if (i < end) {
        Interval = setInterval(function () {
          i += 4000; // 设置每次增加的动态数字，可调整
          if (i > end) {
            clearInterval(Interval); // 清除setInterval的time，这个方法w3c可具体查看文档
            o.innerHTML = end.toLocaleString(); // 此赋值是为了避免最后一次增加过后的数据和真实数据不同
            i = 0;
          } else {
            o.innerHTML = i.toLocaleString();
          }
        }, 10); // 数据跳转的速度控制
      }
    },

    getStat() {
      let that = this
      console.log(that);
      homeApi.allGroupNum().then(res => {
        // get allTimeData
        const tmpdata = res.data.returnData
        console.log(tmpdata);
        this.day_num = tmpdata.day.noRepeatInNum
        this.week_num_num = tmpdata.week.noRepeatInNum
        this.mon_num = tmpdata.month.noRepeatInNum
        this.year_num = tmpdata.year.noRepeatInNum

        // let btdata = new Array();
        // let bvdata = new Array();
        // tmpdata.foreach(function(item,index){
        //   console.log(item);
        //   console.log(index);
        // });

      });
    },

    getHomeBarData() {
      let that = this
      console.log(that);
      homeApi.homeBarData().then(res => {
        // get allTimeData
        const tmpdata = res.data.data.allTimeData

        let datas = []
        Object.values(tmpdata).forEach((value) => {
          console.log(value.num);
          datas.push(value.num)

        });
        console.log(datas);
        this.klqsDatas = datas
        console.log(tmpdata);
        // this.day_num = tmpdata.day.noRepeatInNum
        // this.week_num_num = tmpdata.week.noRepeatInNum
        // this.mon_num = tmpdata.month.noRepeatInNum
        // this.year_num = tmpdata.year.noRepeatInNum

        // let btdata = new Array();
        // let bvdata = new Array();
        // tmpdata.foreach(function(item,index){
        //   console.log(item);
        //   console.log(index);
        // });

      });
    },

    getInfoDatas() {
      let that = this
      console.log(that);
      homeApi.allInfoDatas().then(res => {
        // get allTimeData
        console.log(res);
        this.ssjgNumDatas = res.msg
        // this.ssjgNumDatas = res.data.returnData
        // let ssjgNumDatas = this.ssjgNumDatas
        // ssjgNumDatas.forEach(item => {
        //   console.log(parseInt(item.proportion));
        //   let proportion = parseInt(item.proportion)
        //   if (proportion >= 80 && proportion <= 90) {
        //     console.log('11111111');
        //     this.$refs.proportionbox.addClass('rbrate2')
        //   }
        //   if (proportion > 90) {
        //     console.log('222222');
        //     // console.log(this.$refs.proportionbox)
        //     this.$refs.proportionbox.addClass('rbrate3')
        //   }
        // })
        // console.log(tmpdata);
        // console.log(tmpdata.01.proportion);
        // let arr = JSON.stringify(tmpdata)
        // console.log(arr);
        // this.day_num = tmpdata.day.noRepeatInNum
        // this.week_num_num = tmpdata.week.noRepeatInNum
        // this.mon_num = tmpdata.month.noRepeatInNum
        // this.year_num = tmpdata.year.noRepeatInNum

        // let btdata = new Array();
        // let bvdata = new Array();
        // tmpdata.foreach(function(item,index){
        //   console.log(item);
        //   console.log(index);
        // });

      });
    },

    getGcgNumDatas() {
      let that = this
      console.log(that);
      homeApi.allGcgNumDatas().then(res => {
        // get allTimeData
        const tmpdata = res.data.returnData
        console.log(tmpdata);
        // this.day_num = tmpdata.day.noRepeatInNum
        // this.week_num_num = tmpdata.week.noRepeatInNum
        // this.mon_num = tmpdata.month.noRepeatInNum
        // this.year_num = tmpdata.year.noRepeatInNum

        // let btdata = new Array();
        // let bvdata = new Array();
        // tmpdata.foreach(function(item,index){
        //   console.log(item);
        //   console.log(index);
        // });

      });
    }
  },
};
</script>
<style>
#index {
  width: 100%;
  height: 100%;
  float: left;
}

.leftbox {
  width: 30%;
  float: left;
  /* height: 100%; */
}

.leftbox .keliu {
  background-image: url("../assets/index/left_t1_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  height: 7vh;
  color: #b5b7c5;
}

/* 客流趋势 */
.leftbox .keliu .kliu_title {
  line-height: 0.88rem;
  font-size: 20px;
  padding-left: 2rem;
  display: block;
  float: left;
}

.leftbox .keliu .kliu_st {
  float: right;
  line-height: 0.88rem;
  font-size: 0.26rem;
  padding-top: 0.18rem;
}

.leftbox .keliu .kliu_st span {
  display: block;
  background: url("../assets/index/sel_zone_bg.png") no-repeat 0 0;
  background-position: 0 0;
  background-size: 100%;
  text-align: center;
  width: 0.48rem;
  height: 0.48rem;
  line-height: 0.48rem;
  float: left;
  margin-left: 0.08rem;
  cursor: pointer;
}

.leftbox .keliu .kliu_st .spactive {
  background-image: url("../assets/index/sel_zone_active_bg.png");
}

/* 统计图 */
.leftbox .keliu .tongjitu {
  /* padding-top: 0.56rem; */
  width: 100%;
  top: 0.56rem;
}

/* 场馆流量预警 */
.leftbox .cgflow {
  margin-top: 0.8rem;
  background-image: url("../assets/index/left_t3_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 center;
  height: 30vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 场馆左侧 */
.leftbox .cgflow_leftbox {
  /* padding:66px 0 0 6%;
  float: left; */
  /* width: 30%; */
  margin-left: 10px;
}

.leftbox .cgflow_rightbox {
  /* width: 30%; */
  text-align: right;
}

.leftbox .cgflow .cgfitem {
  width: 100%;
  height: 0.46rem;
}

.leftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgtitle{
  margin-right: 5px;
}
.leftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgval{
  margin-right: 10px;
}

.leftbox .cgflow .cgfitem span {
  /* display: block;
    margin-left: 12px;
    float: left;
    display: block; */
  margin-right: 14px;
  /* display: block; */

}

.leftbox .cgflow .cgfitem .cgtitle {
  color: #0096ff;
  font-size: 16px;
}

.leftbox .cgflow .cgfitem .cgval {
  color: white;
  font-weight: 700;
  font-size: 18px;
}

.leftbox .cgflow .cgfitem .cgimg img {
  width: 26px;
  height: 26px;
  overflow: hidden;
  text-align: center;
  vertical-align: bottom;
}

/* 场馆左侧 */
.leftbox .cgflow .leftbox .cgflow_rightbox {
  padding: 66px 0 0 12%;
  float: right;
  width: 30%;
  margin-left: 4%;
}

/* 各场馆人流趋势 */
.leftbox .gcgqs {
  float: left;
  width: 100%;
  height: 30vh;
}

.leftbox .gcgqs .gcg_title {
  background-image: url('../assets/index/left_t2_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 0.88rem;
  font-size: 20px;
  line-height: 0.88rem;
  padding-left: 2rem;
}

/* 中间的数据 */
.centerbox {
  background-image: url('../assets/index/mid_bg.png');
  background-position: 0 0;
  background-size: 100% 100%;
  width: 30%;
  float: left;
  margin-left: 3%;
  padding: 2%;
  margin-top: 5%;
  position: relative;
}

.centerbox .jgrs {
  width: 33.33%;
  float: left;
  height: 120px;
  position: relative;
}

.centerbox .jgval {
  display: block;
  color: white;
  font-size: 26px;
  /* position: absolute;
  bottom: 54px;
  left: 48px; */
  text-align: center;
  margin-top: 32px;
}

.centerbox .jgdesc {
  display: block;
  color: gray;
  font-size: 16px;
  position: absolute;
  bottom: 14px;
  left: 50px;
}

.centerbox .jgval1 {
  bottom: 54px;
  left: 70px;
  margin-left: 44px;
}

.centerbox .jgdesc1 {
  bottom: 16px;
  left: 70px;
}

.centerbox .jgval3 {
  bottom: 54px;
  left: 25px;
  margin-right: 44px;
}

.centerbox .jgdesc3 {
  bottom: 14px;
  left: 26px;
}

.centerbox .tygpic {
  clear: both;
  width: 100%;
  text-align: center;
}

.centerbox .tygpic img {
  height: 4.5rem;
  margin: 12% auto;
}

.ndjgrs {
  color: white;
  text-align: center;
  position: absolute;
  bottom: 8%;
  left: 41%;
}

.ndjgrs .nddesc {
  font-size: 18px;
  display: block;
  margin-bottom: 19px;
}

.ndjgrs .ndval {
  display: block;
  font-size: 24px;
}

/* 右边 */
.rbox {
  width: 30%;
  float: left;
  margin-left: 3%;
  color: #fff;
}

.rbox .rbox_title {
  background-image: url('../assets/index/right_t1_bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  height: 0.86rem;
  line-height: 0.86rem;
  font-weight: 600;
  font-size: 20px;
  text-align: right;
  padding-right: 2.1rem;
  color: #b5b7c5;
}

.rbox .rbox_con {
  width: 100%;
  margin-top: 12px;
}

.rbox .rbox_con .rbitem {
  background-image: url('../assets/index/rb_data_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 2.4rem;
  width: 46%;
  margin-left: 0.28rem;
  float: left;
  margin-top: 0.46rem;
  padding-top: 0.2rem;
  position: relative;
}

.rbox .rbox_con .rbitem span {
  display: block;
}

.rbox .rbox_con .rbitem .rbcgname {
  margin-top: 0.28rem;
  color: #0096ff;
  text-align: right;
  padding-right: 0.28rem;

}

.rbox .rbox_con .rbitem .rbtitle {
  text-align: left;
  padding-left: 0.66rem;
  padding-top: 0.17rem;
}

.rbox .rbox_con .rbitem .rbval {
  font-size: 25px;
  font-weight: 600;
  width: 60%;
  height: 118px;
  text-align: center;
  /* line-height: 118px; */
  line-height: 160px;
}

.rbox .rbox_con .rbitem .rbrate {
  width: 32%;
  /* float: left; */
  height: 82px;
  text-align: center;
  line-height: 82px;
  position: absolute;
  bottom: 8px;
  right: 15px;
  color: #00D8FF;
  background-image: url(../assets/index/安静.png);
  background-size: 100% 100%;
  background-position: 100% 100%;
  background-repeat: no-repeat;

}

.rbox .rbox_con .rbitem .rbrate2 {
  background-image: url(../assets/index/舒适.png);

}

.rbox .rbox_con .rbitem .rbrate3 {
  background-image: url(../assets/index/拥挤.png);

}

/* 页面背景 */
/* .page_bg {
  clear: both;
  background-image: url("../assets/index/bg.jpg") !important;
  width: 100%;
  height: 100%;
  background-image: url('../assets/index/bg.jpg') !important;
  background-size: 100% 100%;
  background-position: 100% 100%;
  background-repeat: no-repeat;
} */
.btgym {
  width: 100%;
  height: 100%;
  background-image: url('../assets/index/bg.jpg') !important;
  background-size: 100% 100%;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

.screen-box {
  background: none !important;
}
</style>