<template>
  <v-scale-screen width="3840" height="2160">
    <div id="index">
      <!-- 左边 -->
      <div class="indexleftbox">
        <!-- 客流 -->
        <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="selitem('m')">月</span>
            <span id="ditem" :class="klselt == 'd' ? 'spactive' : ''" @click="selitem('d')">日</span>
          </div>
        </div>
        <!-- 立体柱状图 -->
        <div class="tongjitu" id="homebar">
          <!-- 柱图，注意样式 -->
        </div>
        <!-- 几大场馆预警图 -->
        <div class="cgflow">
          <!-- 左边的流量预警  -->
          <div class="cgflow_leftbox">
            <!-- 体育场的流量预警 -->
            <div class="cgfitem">
              <span class="cgtitle">{{ groupNameData[0] }}</span>
              <span class="cgval">{{ proportionData[0] }}</span>
              <!-- <span class="cgtitle">体育场</span>
              <span class="cgval">57.4%</span> -->
              <span class="cgimg"><img src="../assets/index/tyc_icon.png" /></span>
            </div>
            <!-- 体育馆 -->
            <div class="cgfitem">
              <span class="cgtitle">{{ groupNameData[1] }}</span>
              <span class="cgval">{{ proportionData[1] }}</span>
              <!-- <span class="cgtitle">体育馆</span>
              <span class="cgval">57.45%</span> -->
              <span class="cgimg"><img src="../assets/index/tyg_icon.png" /></span>
            </div>
            <!-- 游泳馆 -->
            <div class="cgfitem">
              <span class="cgtitle">{{ groupNameData[2] }}</span>
              <span class="cgval">{{ proportionData[2] }}</span>
              <!-- <span class="cgtitle">游泳場館</span>
              <span class="cgval">5%</span> -->
              <span class="cgimg"><img src="../assets/index/yyg_icon.png" /></span>
            </div>
          </div>
          <!-- 中间环形饼图 -->
          <div id="indexPie1"></div>
          <!-- 右边流量预警 -->
          <div class="cgflow_rightbox">
            <!-- 图书馆 -->
            <div class="cgfitem">
              <span class="cgimg"><img src="../assets/index/tsg_icon.png" /></span>
              <span class="cgval">{{ proportionData[3] }}</span>
              <span class="cgtitle">{{ groupNameData[3] }}</span>
              <!-- <span class="cgval">56.56%</span>
              <span class="cgtitle">劳务义工博物馆</span> -->
            </div>
            <!-- 文化馆 -->
            <div class="cgfitem">
              <span class="cgimg"><img src="../assets/index/whg_icon.png" /></span>
              <span class="cgval">{{ proportionData[4] }}</span>
              <span class="cgtitle">{{ groupNameData[4] }}</span>
              <!-- <span class="cgval">56.666%</span>
              <span class="cgtitle">图书馆</span> -->
            </div>
            <!-- 博物馆 -->
            <div class="cgfitem">
              <span class="cgimg"><img src="../assets/index/bwg_icon.png" /></span>
              <span class="cgval">{{ proportionData[5] }}</span>
              <span class="cgtitle">{{ groupNameData[5] }}</span>
              <!-- <span class="cgval">5%</span>
              <span class="cgtitle">文化馆</span> -->
            </div>
          </div>
        </div>

        <!-- 今日各场馆服务人次趋势 -->
        <div class="gcgqs">
          <div class="gcg_title">今日各场馆服务人次趋势</div>
          <div id="kl-line" style="width: 90%; height: 2.3rem;margin-left: 10%;"></div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="centerbox">
        <!-- 今日进馆人数 -->
        <div class="jgrs jgrs1">
          <span id="jgval1" class="jgval">{{ day_num }}</span>
          <span class="jgdesc">今日进馆人数</span>
        </div>
        <!-- 本周进馆人数 -->
        <div class="jgrs jgrs2">
          <span id="jgval2" class="jgval">{{ week_num }}</span>
          <span class="jgdesc">本周进馆人数</span>
        </div>
        <!-- 本月进馆人数 -->
        <div class="jgrs jgrs3">
          <span id="jgval3" class="jgval">{{ mon_num }}</span>
          <span class="jgdesc">本月进馆人数</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">{{ item.groupName||'博物馆' }}</span>
            <span class="rbtitle">日累计人数</span>
            <!-- <span class="rbval">4,738</span> -->
            <span class="rbval">{{ item.allEnter }}</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 class="rbrate">{{ item.proportion }}</div> -->
            <div class="rbrateBar" v-if="0">
              <span :class="(item.proportion.split('%')[0])>0?'active':''"></span>
              <span :class="(item.proportion.split('%')[0])>16.666?'active':''"></span>
              <span :class="(item.proportion.split('%')[0])>33.333?'active':''"></span>
              <span :class="(item.proportion.split('%')[0])>50?'active':''"></span>
              <span :class="(item.proportion.split('%')[0])>66.666?'active':''"></span>
              <span :class="(item.proportion.split('%')[0])==100?'active':''"></span>
            </div>
          </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>
        <div class="rbox_label">
          <span></span>舒适
          <span></span>拥挤
          <span></span>爆满
        </div>
      </div>

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

// 引入api
import * as homeApi from '@/api/home'
let barChart = null, lineChart = null, pieChart = null;
let ws;
export default {
  data() {
    return {
      day_num: 0,
      week_num: 0,
      mon_num: 0,
      year_num: 0,

      // 年月日选中的样式,默认日
      klselt: "d",
      // 绘制数据
      klqsXDatas: [],
      klqsDatas: [],
      klqsXDataD: [],//日数据
      klqsDataD: [],
      klqsXDataM: [],//月数据
      klqsDataM: [],
      klqsXDataY: [],//年数据
      klqsDataY: [],

      dataP: [],//左侧饼图
      proportionData: [],
      groupNameData: [],
      proportionData_z: [],

      // 各场馆实时服务人次
      ssjgNumDatas: [],

      // 折线图数据
      rsqsXData: [],
      rsqsDatas: [],
      rsqsDataName: [],
      rsqsData_z: [],

      timer0: null,//年月日切换定时器
      timer1: null,//左上角定时器
      timer2: null,//左下角定时器
      timer3: null,
      timer4: null,
    };
  },
  //创建的时候修改背景图片
  created() {

    let cc = window.document.getElementById("app");
    // 清除其他多余的classname
    let len = cc.classList.length;

    if (len > 1) {
      cc.className = "btgym page_bg";
    }
  },
  mounted() {

    this.getStat();
    this.btgetdata('d');
    this.btgetdata('m');
    this.btgetdata('y');
    this.getPieData();
    this.getInfoDatas();
    this.getGcgNumDatas();
    

    setTimeout(() => {
      // 加延时器使图像绘制获取元素宽高最新的值、等待接口返回数据
      this.autoTimer0();//年月日切换
      this.line_zone();
      this.index_pie1();
    }, 1000)

    // this.getsckdata();
  },
  methods: {
    autoTimer0(){
      let that = this;
      
      var chartDom = document.getElementById("homebar");
      barChart = echarts.init(chartDom);

      that.klqsDatas = that.klqsDataD;
      that.klqsXDatas = that.klqsXDataD;
      this.home_bar();

      clearInterval(that.timer0);
      that.timer0 = setInterval(() => {
        if(this.klselt == 'y'){
          this.klselt = 'm';
          that.klqsDatas = that.klqsDataM;
          that.klqsXDatas = that.klqsXDataM;
        }else if(this.klselt == 'm'){
          this.klselt = 'd';
          that.klqsDatas = that.klqsDataD;
          that.klqsXDatas = that.klqsXDataD;
        }else if(this.klselt == 'd'){
          this.klselt = 'y';
          that.klqsDatas = that.klqsDataY;
          that.klqsXDatas = that.klqsXDataY;
        }
        this.home_bar();
      }, 5000);
    },
    btgetdata(klselt) {
      //年客流、月、日
      let that = this;
      // console.log(type)
      let rqtp;
      switch (klselt) {
        case 'd': rqtp = "daily"; break;
        case 'm': rqtp = "monthly"; break;
        case 'y': rqtp = "yearly"; break;
      }
      
      // allTygGroupTimeNum // /pass.passcc/allGroupTimeNum
      homeApi.allTygGroupTimeNum({granularity:rqtp}).then(res => {
        if(!res.data){
          return;
        }
        const tmpdata = res.data.data.allTimeData
        const dkeys = res.data.data.dkeys

        let datas = []
        Object.values(tmpdata).forEach((value) => {
          datas.push(value.num);
        });
        switch (klselt) {
          case 'd': 
            that.klqsDataD = datas;
            that.klqsXDataD = dkeys;
          break;
          case 'm': 
            that.klqsDataM = datas;
            that.klqsXDataM = dkeys;
          break;
          case 'y': 
            that.klqsDataY = datas;
            that.klqsXDataY = dkeys;
          break;
        }

      });
    },
    
    //选择年月日中的某个
    selitem(type) {
      // console.log(type);
      this.klselt = type;
      this.btgetdata();
      this.autoTimer0();
    },

    // 透明背景柱状统计图--总服务人次趋势
    home_bar() {
      let that = this;
      var option;
      
      function run() {
        let xData = that.klqsXDatas.slice(-8,that.klqsXDatas.length);
        var data = that.klqsDatas.slice(-8,that.klqsDatas.length);
        let max=data[0];
        for (let i = 0; i < data.length; i++) {
          if (data[i]>max) {
            max = data[i];
          }
        }
        let dataLenArr = [], dataBGArr = [];
        data.map(item=>{
          dataLenArr.push(1);// 获取和数据一样长度的底部图形数组；
          dataBGArr.push(max);// 数组最大值做背景柱形
        })
        
        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: 10,
            top: 20,
          },
          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: xData,
            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: 10,
              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: data,
              type: 'pictorialBar',
              barMaxWidth: '10',
              symbolPosition: 'end',
              symbol: 'circle',
              symbolOffset: [0, '-50%'],
              symbolSize: [10, 5],
              zlevel: 2,
              color: 'rgba(255,255,255,0.7)',
              // 立体柱形的顶部图形
            },
            {
              data: dataBGArr,
              type: 'bar',
              barGap: '-100%',
              barMaxWidth: 'auto',
              barWidth: 10,
              zlevel: -1,
              color: 'rgba(0, 75, 187, 0.2)',
              // 立体柱形的背景图形
            },
            {
              data: dataBGArr,
              type: 'pictorialBar',
              barMaxWidth: '10',
              symbolPosition: 'end',
              symbol: 'circle',
              symbolOffset: [0, '-50%'],
              symbolSize: [10, 5],
              zlevel: 2,
              color: 'rgba(0, 75, 187, 0.5)',
              // 立体柱形的背景图形顶部
            },
          ],
          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);', //添加阴影

          },
        };

        option && barChart.setOption(option);
      }
      run();
      clearInterval(that.timer1);
      that.timer1 = setInterval(function () {
        barChart.clear();
        run(); 
      }, 5000);
    },

    // 今日各场馆服务人次趋势
    line_zone() {
      let that = this;
      var chartDom = document.getElementById("kl-line");
      var option;
      lineChart = echarts.init(chartDom);
      
      function run(){
        // 获取新数据-处理--改用ws处理数据
        // that.getGcgNumDatas();
        
        var xData = that.rsqsXData;
        var gcolor = ['#a9eeff', '#6666FF', '#FF6600', '#02ff00', '#00ffff', '#fdff00'];

        var data = that.rsqsData_z;

        var series = [];
        for (var i = 0; i < data.length; i++) {
          series.push({
            name: that.rsqsDataName[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: gcolor[i]
                }, {
                  offset: 0.8,
                  color: '#fff',
                }], false),
                // shadowColor: 'rgba(255,255,255, 0.1)',
                shadowBlur: 10,
                opacity: 0.3,
              }
            },
            itemStyle: {
              normal: {
                color: gcolor[i],
                lineStyle: {
                  width: 1,
                  type: 'solid' //'dotted'虚线 'solid'实线
                },
                borderColor: gcolor[i], //图形的描边颜色。支持的格式同 color
                borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] 
                barBorderRadius: 0,
                label: {
                  show: false,
                },
                opacity: 0.5,
              }
            },
            data: data[i],

          })
        }
        // setting option
        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}<br />{a3}: {c3}<br />{a4}: {c4}<br />{a5}: {c5}',
            backgroundColor: '#000', // 背景
            padding: [8, 10], //内边距
            extraCssText: 'box-shadow: 0 0 3px #fffff;', //添加阴影
          },
          grid: {
            borderWidth: 0,
            top: 10,
            bottom: 20,
            right: 0,
            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 && lineChart.setOption(option);
        
      }
      run();
      that.timer3 = setInterval(function () {
        lineChart.clear();
        run();
      }, 3000);
    },

    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
      homeApi.allGroupNum().then(res => {
        if(!res.data){
          return;
        }
        // get allTimeData
        const tmpdata = res.data.returnData
        this.day_num = tmpdata.day.noRepeatInNum
        this.week_num = tmpdata.week.noRepeatInNum
        this.mon_num = tmpdata.month.noRepeatInNum
        this.year_num = tmpdata.year.noRepeatInNum
      });
    },

    getPieData() {
      let that = this;
      homeApi.homeBarData().then(res => {
        if(!res.data){
          return;
        }
        // /pass.passcc/allGroupTimeNum&granularity=daily
        // get allTimeData
        const pieData = res.data.data.groupsData;

        that.proportionData = [];that.groupNameData=[];that.dataP=[];
        pieData.forEach((item) => {
          that.proportionData.push(item.proportion);
          that.groupNameData.push(item.groupName);
          that.dataP.push({
            name:item.groupName,
            value:item.proportion.split('%')[0]
          })
        })

      });
    },

    // 查看拥挤并计算舒适度
    getInfoDatas() {
      let that = this
      homeApi.allInfoDatas().then(res => {
        // return;//Cannot read properties of undefined (reading 'returnData')
        if(res.data){
          that.ssjgNumDatas = res.data.returnData
          console.log(that.ssjgNumDatas, 'that.ssjgNumDatas')
          that.ssjgNumDatas.forEach(item => {
            let proportion = parseInt(item.proportion);

            // if (proportion < 50 || proportion == 50) {
            //   this.$refs.proportionbox.addClass('rbrate2')
            // }else if (proportion < 100 || proportion == 100) {
            //   this.$refs.proportionbox.addClass('rbrate3')
            // }else{
            //   this.$refs.proportionbox.addClass('rbrate4')
            // }
          })
        }
      });
    },

    getGcgNumDatas() {
      let that = this
      that.rsqsDatas = [];
      that.rsqsDataName = [];
      that.rsqsData_z = [];
      homeApi.allGcgNumDatas().then(res => {
        // /pass.passcc/toDayGroupsEnterNum'
        if(!res.data){
          return;
        }
        const tmpdata = res.data.data
        tmpdata.forEach((item) => {
          this.rsqsDataName.push(item.groupName);
          that.rsqsDatas.push(item.list)
        })
        
        this.rsqsXData = res.data.data[0].list.dkeys;
        this.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.rsqsData_z.push(rsqsData)
        })
        // console.log(this.rsqsData_z, 'rsqsData_z')
      });
    },
    index_pie1(){
      let that = this;
      var pieDom1 = document.getElementById("indexPie1");
      pieChart = echarts.init(pieDom1);
      // var dataP = [
      //   {name: '体育场',value: 5,},
      //   {name: '体育馆',value: 20,},
      //   {name: '游泳场馆',value: 13,},
      //   {name: '图书馆',value: 12,},
      //   {name: '文化馆',value: 25,},
      //   {name: '博物馆',value: 12,},
      //   // {name: '',value: 13,}
      // ];
      
      function hexToRgba(hex, opacity) {
        return (
            'rgba(' +
            parseInt('0x' + hex.slice(1, 3)) +
            ',' +
            parseInt('0x' + hex.slice(3, 5)) +
            ',' +
            parseInt('0x' + hex.slice(5, 7)) +
            ',' +
            opacity +
            ')'
        );
      }
      
      function run(){
        var dataP = that.dataP;
        let color = ['#ff9acc', '#6666ff', '#a9eeff', '#02ff00','#00ffff', '#fdff00'];
        let color1=[], color2=[], color3=[];
        // 设置每层圆环颜色和添加间隔的透明色
        color.forEach((item) => {
            color1.push(item, 'transparent');
            color2.push(hexToRgba(item, 0.4), 'transparent');
            color3.push(hexToRgba(item, 1), 'transparent');
        });
        let data1 = [];
        let sum = 0;
        // 根据总值设置间隔值大小
        dataP.forEach((item) => {
            sum += Number(item.value);
        });
        // 给每个数据后添加特定的透明的数据形成间隔
        dataP.forEach((item, index) => {
            if (item.value !== 0) {
                data1.push(item, {
                    name: '',
                    value: sum / 70,
                    labelLine: {
                        show: false,
                        lineStyle: {
                            color: 'transparent',
                        },
                    },
                    itemStyle: {
                        color: 'transparent',
                    },
                });
            }
        });
        var option = {
          tooltip: {
              formatter: (params) => {
                  if (params.name !== '') {
                      return params.name + ' : ' + params.value + '\n' + '%';
                  }
              },
          },
          grid: {
              top: 0,
              bottom: 0,
              left: 0,
              right: 0,
              containLabel: true,
          },
          series: [
              {
                  type: 'pie',
                  radius: ['90%', '80%'],
                  center: ['50%', '50%'],
                  hoverAnimation: false,
                  startAngle: 90,
                  selectedMode: 'single',
                  selectedOffset: 0,
                  itemStyle: {
                      normal: {
                          color: (params) => {
                              // console.log('params', params)
                              return color2[params.dataIndex];
                          },
                      },
                  },
                  label: {
                      show: false,
                      formatter: '{b}' + ' ' + '{c}',
                  },
                  data: data1,
                  z: 666,
              },
              {
                  type: 'pie',
                  radius: ['90%', '100%'],
                  center: ['50%', '50%'],
                  hoverAnimation: false,
                  startAngle: 90,
                  selectedMode: 'single',
                  selectedOffset: 0,
                  itemStyle: {
                      normal: {
                          color: (params) => {
                              return color3[params.dataIndex];
                          },
                      },
                  },
                  label: {
                      show: false,
                      formatter: '{b}' + ' ' + '{c}',
                  },
                  data: data1,
                  z: 666,
              },
          ],
        }
        option && pieChart.setOption(option);
      }
      
      run();
      that.timer4 = setInterval(function () {
        pieChart.clear();
        run();
      }, 4000);
    },
    // 获取实时数据
    getsckdata(){
      let that = this;
      // websocket 
      ws = new WebSocket("ws://192.168.66.16/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)
        // console.log("11111", jstr, e);
        if(!jstr){
          return;
        }
        const pieData = jstr.realTimeData.data;

        // 饼图数据
        that.proportionData = [];that.groupNameData=[];that.dataP=[];
        pieData.forEach((item) => {
          that.proportionData.push(item.proportion);
          that.groupNameData.push(item.groupName);
          that.dataP.push({
            name:item.groupName,
            value:item.proportion.split('%')[0]
          })
        })
        // 折线图数据
        function handleLine(){
          that.rsqsDatas = [];that.rsqsDataName = [];that.rsqsData_z = [];
          const tmpdata = jstr.toDayGroupsEnterNum.data;
          tmpdata.forEach((item) => {
            that.rsqsDataName.push(item.groupName);
            that.rsqsDatas.push(item.list)
          })
          
          that.rsqsXData = 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.rsqsData_z.push(rsqsData)
          })
        }
        handleLine();
        
        // 柱形数据
        function handleBar(){
          const tmpklqsdata1 = jstr.allGroupTimeNumDay.data.data.allTimeData;
          const tmpklqsdata2 = jstr.allGroupTimeNumMonth.data.data.allTimeData;
          const tmpklqsdata3 = jstr.allGroupTimeNumYear.data.data.allTimeData;
          const dkeys1 = jstr.allGroupTimeNumDay.data.data.dkeys;
          const dkeys2 = jstr.allGroupTimeNumMonth.data.data.dkeys;
          const dkeys3 = jstr.allGroupTimeNumYear.data.data.dkeys;

          let datas1 = [], datas2 = [], datas3 = [];
          Object.values(tmpklqsdata1).forEach((value) => {
            datas1.push(value.num);
          });
          Object.values(tmpklqsdata2).forEach((value) => {
            datas2.push(value.num);
          });
          Object.values(tmpklqsdata3).forEach((value) => {
            datas3.push(value.num);
          });
          that.klqsDataD = datas1;
          that.klqsXDataD = dkeys1;
          that.klqsDataM = datas2;
          that.klqsXDataM = dkeys2;
          that.klqsDataY = datas3;
          that.klqsXDataY = dkeys3;
        }
        handleBar();
      };
    },
  },
  beforeDestroy(){
    console.log('清除总览定时器')
    clearInterval(this.timer0);
    clearInterval(this.timer1);
    clearInterval(this.timer2);
    clearInterval(this.timer3);
    clearInterval(this.timer4);
    // ws.close();
  }
};
</script>
<style scoped>
.screen-box {
  background: none !important;
}
</style>
<style>
.btgym {
  width: 100%;
  height: 100%;
  background-image: url('../assets/index/bg.png') !important;
  background-size: 100% 100%;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}
#index {
  width: 100%;
  height: 100%;
  float: left;
}

.indexleftbox {
  width: 7.48rem;
  float: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  margin-top: calc(-1.04rem + 0.16rem);
}

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

/* 客流趋势 */
.indexleftbox .kliu_title {
  line-height: 0.58rem;
  font-size: 0.31rem;
  padding-left: 2rem;
  display: block;
  float: left;
}

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

.indexleftbox .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;
}

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

/* 统计图 */
.indexleftbox .tongjitu {
  margin-top: 0.2rem;
  width: 7.03rem;
  height: 2.3rem;
}

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

/* 场馆左侧 */
.indexleftbox .cgflow_leftbox {
  width: 2.16rem;
  height: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.indexleftbox .cgflow_rightbox {
  width: 2.16rem;
  height: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.indexleftbox .cgflow .cgfitem {
  width: 100%;
  height: 0.29rem;
  display: flex;
  justify-content: space-between;
}

/* .indexleftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgtitle {
  margin-right: 5px;
}

.indexleftbox .cgflow .cgflow_leftbox .cgfitem:nth-child(3) .cgval {
  margin-right: 10px;
} */

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

}

.indexleftbox .cgflow .cgfitem .cgtitle {
  color: #0096ff;
  font-size: 14px;
  /* flex: 1; */
  width: 38%;
}

.indexleftbox .cgflow .cgfitem .cgval {
  color: white;
  font-weight: 700;
  font-size: 16px;
  width: 38%;
}

.indexleftbox .cgflow .cgfitem .cgimg img {
  width: 0.29rem;
  height: 0.29rem;
  overflow: hidden;
  text-align: center;
  vertical-align: bottom;
}

/* 场馆左侧 */
.indexleftbox .cgflow .indexleftbox .cgflow_rightbox {
  padding: 66px 0 0 12%;
  float: right;
  width: 30%;
  margin-left: 4%;
}
#indexPie1{
  width: 2rem;
  height: 2rem;
}
/* 各场馆人流趋势 */
.indexleftbox .gcgqs {
  /* float: left; */
  width: 100%;
  height: 30vh;
}

.indexleftbox .gcgqs .gcg_title {
  background-image: url('../assets/index/left_t2_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 0.99rem;
  font-size: 0.31rem;
  line-height: 0.78rem;
  padding-left: 2rem;
  color: #fff;
}

/* 中间的数据 */
.centerbox {
  background-image: url('../assets/index/mid_bg.png');
  background-position: 0 0;
  background-size: 100% 100%;
  width: 8.07rem;
  height: 9.12rem;
  float: left;
  margin-left: 0.34rem;
  padding: 2%;
  margin-top: 0.53rem;
  position: relative;
  box-sizing: border-box;
}

.centerbox .jgrs {
  width: 1.8rem;
  color: #fff;
  position: absolute;
  text-align: center;
}
.centerbox .jgrs1{
  top: 1rem;
  left: 1.03rem;
}
.centerbox .jgrs2{
  top: 1rem;
  left: 3.135rem;
}
.centerbox .jgrs3{
  top: 1rem;
  right: 1.03rem;
}
.centerbox .jgval {
  font-size: 0.34rem;
  display: block;
  line-height: 0.28rem;
  margin-bottom: 0.18rem;
}

.centerbox .jgdesc {
  font-size: 0.2rem;
}

@keyframes tygpicmove {
  0%{
    transform: translateY(-10px);
    opacity: 0.6;
  }
  25%{
    transform: translateY(0px);
    opacity: 1;
  }
  50%{
    transform: translateY(10px);
    opacity: 0.6;
  }
  75%{
    transform: translateY(0px);
    opacity: 1;
  }
  100%{
    transform: translateY(-10px);
    opacity: 0.6;
  }
}
.centerbox .tygpic {
  clear: both;
  width: 5.93rem;
  height: 4.44rem;
  text-align: center;
  margin: 1rem auto 0px;
  animation: tygpicmove 2s ease-out infinite;
}

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

.ndjgrs {
  width: 100%;
  text-align: center;
  color: white;
  text-align: center;
  position: absolute;
  bottom: 0.57rem;
  left: 0;
}

.ndjgrs .nddesc {
  font-size: 0.28rem;
  display: block;
  margin-bottom: 0.1rem;
}

.ndjgrs .ndval {
  display: block;
  font-size: 0.5rem;
}

/* 右边 */
.rbox {
  width: 7.34rem;
  float: left;
  margin-left: 0.34rem;
  color: #fff;
  margin-top: calc(-0.97rem + 0.16rem);
}

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

.rbox .rbox_con {
  width: 100%;
  margin-top: 0.36rem;
  display: flex;
  flex-wrap: wrap; 
}

.rbox .rbox_con .rbitem {
  background-image: url('../assets/index/rb_data_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 3rem;
  width: 3.51rem;
  margin-right: 0.08rem;
  margin-bottom: 0.23rem;
  padding-top: 0.2rem;
  position: relative;
  box-sizing: border-box;
}

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

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

.rbox .rbox_con .rbitem .rbtitle {
  text-align: left;
  padding-left: 0.66rem;
  padding-top: 0.08rem;
  font-size: 0.24rem;
}

.rbox .rbox_con .rbitem .rbval {
  font-size: 0.38rem;
  font-weight: 600;
  width: 60%;
  height: 118px;
  padding-left: 0.4rem;
  line-height: 1.9rem;
}
.rbox .rbox_con .rbitem .rbrate0{
  width: 1.1rem;
  height: 1.1rem;
  text-align: right;
  position: absolute;
  bottom: 0.15rem;
  right: 0.2rem;
  font-size: 0.22rem;
}
.rbox .rbox_con .rbitem .rbrate {
  width: 0.92rem;
  height: 0.32rem;
  text-align: right;
  position: absolute;
  bottom: 0.85rem;
  right: 0.29rem;
  font-size: 0.22rem;
}
.rbox .rbox_con .rbitem .rbrateBar{
  /* width: 0.92rem; */
  height: 0.3rem;
  position: absolute;
  bottom: 0.55rem;
  right: 0.29rem;
  z-index: 2;
}
.rbox .rbox_con .rbitem .rbrateBar span{
  background-color: #45487a;
  display:inline-block;
  width: 0.15rem;
  height: 0.3rem;
  margin-left: 0.05rem;
}
.rbox .rbox_con .rbitem .rbrateBar span.active{
  background-color: #0036ff;
}

.rbox .rbox_con .rbitem .rbrate2 {
  background-image: url(../assets/index/2.png);
  background-size: 100% 100%;
}

.rbox .rbox_con .rbitem .rbrate3 {
  background-image: url(../assets/index/3.png);
  background-size: 100% 100%;
}
.rbox .rbox_con .rbitem .rbrate4 {
  background-image: url(../assets/index/1.png);
  background-size: 100% 100%;
}
.rbox .rbox_label{
  /* width: 100%; */
  display: flex;
  justify-content: end;
  align-items: center;
  font-size: 0.22rem;
  color: #aaa;
  margin-right: 0.3rem;
}
.rbox .rbox_label span{
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  margin: 0px 0.15rem;
}
.rbox .rbox_label span:nth-of-type(1){
  background: url(../assets/index/舒适.png);
  background-size: 100% 100%;
}
.rbox .rbox_label span:nth-of-type(2){
  background: url(../assets/index/拥挤.png);
  background-size: 100% 100%;
}
.rbox .rbox_label span:nth-of-type(3){
  background: url(../assets/index/爆满.png);
  background-size: 100% 100%;
}

/* 页面背景 */
/* .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;
} */


.screen-box {
  overflow: visible !important;
}
.screen-box .screen-wrapper{
    /* // width: calc(24rem - 0.44rem) !important; */
    height: 10.71rem !important;
    overflow: visible !important;
    margin: 0px 0.29rem 0px 0.15rem !important;
    /* // margin: 0px auto !important; */
    box-sizing: border-box !important;
    /* // transform-origin: center top !important; */
    transform: scale(1) !important;
  }
#index{
  /* // transform: scale(1.25); */
  /* //浏览器缩小至1536时，匹配外盒子逻辑赋予的transform: scale(0.8, 0.8) */
  transform-origin: 0 0;
  /* // display: flex; */
  /* // transform: scale(1.1); */
  /* // width: 100%; */
  /* // justify-content: space-between; */
}
</style>