<template>
  <div class="tyc">
    <div class="topnav">体育</div>
    <!-- 图形 -->
    <div class="tyclogo">
      <div class="tyname">体育</div>
      <div class="tydesc">体育场|体育馆|游泳馆</div>
    </div>
    <!-- 总计进馆人数 -->
    <div class="jgbox">
      <div class="jg_title">总计进馆人数</div>
      <div class="jgcon">

        <div class="jgitem">
          <div class="jgimg"><img src="../assets/img/icon01.png" /></div>
          <span class="jgival">{{ tdnum }}</span>
          <span class="jgdesc">今日进馆人数</span>
        </div>
        <div class="jgitem">
          <div class="jgimg"><img src="../assets/img/icon02.png" /></div>
          <span class="jgival">{{ tmdata }}</span>
          <span class="jgdesc">本月进馆人数</span>
        </div>
        <div class="jgitem">
          <div class="jgimg"><img src="../assets/img/icon03.png" /></div>
          <span class="jgival">{{ tydata }}</span>
          <span class="jgdesc">本年进馆人数</span>
        </div>
      </div>
    </div>
    <!-- 进馆人数统计 -->
    <div class="gcins">
      <div class="gcins_title">24小时总进馆人流趋势</div>
      <div id="gcins_charts" style="height:16rem"></div>
    </div>
    <!-- 各场馆人次占比 -->
    <div class="pcgrbox">
      <div class="pcb_title">各场馆人次占比</div>
      <div class="pcbcon">

        <div class="pcbitem" v-for="cg in cgdata" :key="key">
          <div class="pcbval">{{ cg.proportion }}</div>
          <div class="pcbdesc">{{cg. groupName }}</div>
        </div>

      </div>
    </div>

    <!-- 各场馆人数趋势 -->
    <div class="gcgrs">
      <div class="gcgrs_title">各场馆人流趋势</div>
      <div id="gc_charts" class="gcgrs_charts"></div>
    </div>

  </div>
</template>
<style scoped>
.tyc {
  position: relative;
  /** wait for chk */
  /* background-color: #032461; */
}

.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;
  margin-bottom: 30rpx;
}

.tyclogo {
  margin-top: 1.6rem;
  background-image: url("../assets/img/tyc_00.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0;
  height: 12rem;
}

.tyclogo .tyname {
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: right;
  padding-right: 7.3rem;
  font-size: 1.7rem;
  padding-top: 6.8rem;
}

.tyclogo .tydesc {
  height: 2rem;
  line-height: 2rem;
  font-size: 1.03rem;
  text-align: right;
  padding-right: 1.06rem;
  color: #fff;
}

/* 总计进馆 */
.jgbox {
  margin-top: 1.02rem;
  width: 100%;
  height: 12rem;
}

.jgbox .jg_title {
  background-image: url('../assets/img/ty_jg_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  padding-left: 3.2rem;
  height: 2.06rem;
  line-height: 2.06rem;
}

.jgbox .jgcon {
  width: 100%;
  height: 7rem;
  padding-top: 2rem;
}

.jgbox .jgcon .jgitem {
  width: 30%;
  margin-left: 3%;
  float: left;
}

.jgbox .jgcon .jgitem .jgimg {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.jgbox .jgcon .jgitem span {
  display: block;
  text-align: center;
  height: 1.8rem;
  line-height: 1.8rem;
}

.jgbox .jgcon .jgitem .jgival {
  font-size: 1.06rem;
}

.jgbox .jgcon .jgitem .jgdesc {
  color: #666;
  font-size: 0.8rem;
}

/* 进馆人数统计 */
.gcins {
  margin-top: 1.6rem;
}

.gcins .gcins_title {
  background-image: url("../assets/img/tyc_tbg.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 1.8rem;
  line-height: 1.8rem;
  padding-left: 2.02rem;
}

/* 各场馆人次占比 */
.pcgrbox {
  margin-top: 1.6rem;
  padding-bottom: 4rem;
  height: 8rem;
}

.pcgrbox .pcb_title {
  background-image: url("../assets/img/tyc_tbg.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 1.8rem;
  line-height: 1.8rem;
  padding-left: 2.02rem;
}

.pcgrbox .pcbcon {
  width: 100%;
  margin-top: 2rem;
  display: flex;
  justify-content: space-around;
}

.pcgrbox .pcbcon .pcbitem {
  width: 30%;
}


.pcgrbox .pcbcon .pcbitem div:first {
  margin-left: 0;
}

.pcgrbox .pcbcon .pcbitem .pcbval {
  width: 110px;
  /** 20230727 */
  background-image: url('../assets/img/ty_pcb_item_bg.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 100%;
  line-height: 5rem;
  text-align: center;
  /* 动画效果 */
  -webkit-animation: ani_fls 3s infinite forwards;
  animation: ani_fls 3s infinite forwards;
}

/*闪瞎人的动画 */
@keyframes ani_fls{
  0%{
    opacity: 0.6;
    scale: (0.4);
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0.6;
    /* transform: rotate(1turn); */
    scale: (1);
  }
}

.pcgrbox .pcbcon .pcbitem .pcbdesc {
  background-image: url('../assets/img/ty_pcb_desc.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 0.8rem;
  width: 5rem;
  height: 2rem;
  margin-top: 0.7rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 2rem;
  text-align: center;
}

/* 各场馆人数趋势 */
.gcgrs {
  margin-top: 1.06rem;
}

.gcgrs .gcgrs_title {
  background-image: url("../assets/img/wh_tbg.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 2.5rem;
  line-height: 1.8rem;
  padding-left: 2.62rem;
}

.gcgrs .gcgrs_charts {
  /* margin-top: 2rem; */
  width: 100%;
  height: 19rem;
}
</style>
<script>
import * as echarts from 'echarts';
import * as btApi from '../api/home'
import { ecMaxVal } from '@/utils/comm';

export default {
  name: 'TycView',
  data() {
    return {
      // 场馆数据
      cgdata:[],
      //  柱子图
      ecbardata:[],
      // 今日
      tdnum:0,
      // month
      tmdata:0,
      // year
      tydata:0,
    }
  },
  mounted() {
    // 统计概况信息
    this.csstat()

    // 进馆人数统计
    // -- this.cgsf_line()--
    // 各场馆人数趋势
    this.cg_line()
  },
  methods: {
    // 110,210,310 
    // 查询场馆统计情况
    csstat(){
      let groupId = "110|210|310"
      // 今日进馆数据
      btApi.allGroupTimeNum({granularity:"daily",groupsId:groupId}).then(res=>{
        const cgdata = res.data.data
        // 场馆人次占比
        const tgdata = cgdata.groupsData
        this.cgdata = tgdata
        tgdata.forEach(item=>{
          this.tdnum += item.noRepeatInNum
        });
        
        // 24 小时
        const vkdata = new Array;
        const vvdata = new Array;
        // 
        const dkeys = cgdata.dkeys
        // allTimeData
        const allTdata = cgdata.allTimeData

        dkeys.forEach(function(item,idx){
          // console.log(item)
          vvdata.push( allTdata[item].num)
        });

        vkdata.push({
          xname: dkeys,
          xval:  vvdata
        })

        this.ecbardata = vkdata
         // 24h
         this.cgsf_line()
      });

      // 本月
      btApi.allGroupTimeNum({granularity:"monthly",groupsId:groupId}).then(res=>{
          const cgdata = res.data.data
          // 场馆人次占比
          const tgdata = cgdata.groupsData
          this.cgdata = tgdata
          tgdata.forEach(item=>{
            this.tmdata += item.noRepeatInNum
          });
      });
      // 年度
      btApi.allGroupTimeNum({granularity:"yearly",groupsId:groupId}).then(res=>{
          const cgdata = res.data.data
          // 场馆人次占比
          const tgdata = cgdata.groupsData
          this.cgdata = tgdata
          tgdata.forEach(item=>{
            this.tydata += item.noRepeatInNum
          });
      });      
    },
    // 24H 进馆人数
    cgsf_line() {
      var chartDom = document.getElementById('gcins_charts');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            return params[0].name + "</br>" + params[0].value
          }
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: [{
          data:this.ecbardata[0].xname,
          // data: [
          //   '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00',
          // ],
          axisLine: {
            lineStyle: {
              color: '#0095FF',
              width: 1,
              type: 'solid',
            },
            show: true
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: '#027eff'
            }
          },
          axisLabel: {
            color: '#0095FF',
          }
        }],
        series: [{
          type: 'bar',
          barGap: '5%',
          barWidth: '10%',
          barCategoryGap: '60%',
          stack: 1,
          // animation 
          animationDurationUpdate:3000,
          animationEasingUpdate:'quintcInOut',

          itemStyle: {
            normal: {
              barBorderRadius: [30, 30, 0, 0],
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00feff'
                },
                {
                  offset: 1,
                  color: '#0286ff'
                }
              ]
              )
            }
          },
          data: this.ecbardata[0].xval,
          zlevel: 11
        },
        {
          type: 'scatter',
          stack: 1,
          xAxisIndex: 0,
          symbolOffset: [0, 0], //相对于原本位置的偏移量
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
          itemStyle: {
            normal: {
              color: '#fff'
            }
          },
          symbolSize: 13,
          zlevel: 10,
          z: 2,
        },
        {
          name: '背景',
          type: 'bar',
          barWidth: '10%',
          barGap: '-100%',
          data:ecMaxVal(this.ecbardata[0].xval),
          //data: [15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000, 15000],
          itemStyle: {
            normal: {
              color: '#004298',
              barBorderRadius: 30,
            }
          },
          z: 1,
        },
        ]
      }

      option && myChart.setOption(option);
      //消停几秒后开始，动画
    
     setInterval(()=>{
        myChart.clear()
        option && myChart.setOption(option);
     },4000);
    },
    // 场馆人流趋势
    cg_line() {
      var chartDom = document.getElementById("gc_charts");
      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',];
      var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
      var name = ['体育场', '体育馆', '游泳场馆']
      var data = [
        [137, 34, 135, 161, 74, 152, 110, 100, 150],
        [174, 137, 135, 34, 152, 135, 140, 160, 100],
        [134, 74, 137, 135, 161, 137, 300, 220, 250],
      ]

      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: {
          bottom: 0,
          right: 20,
          itemGap: 20,
          itemWidth: 20,
          itemHeight: 20,
          textStyle: {
            color: '#fff',
            fontSize: '14'
          },
          data: [
            { icon: 'image://img/tyc_icon.png', name: '体育场' },
            { icon: 'image://img/tyg_icon.png', name: '体育馆' },
            { icon: 'image://img/yyg_icon.png', 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: 240,
          bottom: 240,
          right: 20,
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: [{
          type: "category",
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
          axisTick: {
            show: false
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            inside: false,
            interval: 0,
            textStyle: {
              color: '#FFFFFF',
              fontWeight: 'normal',
              fontSize: '12',
            },
          },
          data: xData,
        }],
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#32346c ',
            }
          },
          axisLabel: {
            textStyle: {
              color: '#0095FF',
              fontWeight: 'normal',
              fontSize: '12',
            },
            formatter: '{value}',
          },
        },
        series: series,
      }

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

  },
}
</script>