<template>
  <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="selitem('m')" >月</span>
          <span id="ditem" :class="klselt == 'd' ? 'spactive' : ''" @click="selitem('d')" >日</span>
        </div>
        <!-- 柱状图 -->
        <div class="tongjitu" id="homebar" style="height: 200px; 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: 180px"></div>
        </div>
        
      </div>
    </div>
    <!-- 中间 -->
    <div class="centerbox">
        <!-- 今日进馆人数 -->
        <div class="jgrs">
            <span class="jgval">345,235</span>
            <span class="jgdesc">今日进馆人数</span>
        </div>
        <!-- 本周进馆人数 -->
        <div class="jgrs">
            <span class="jgval">345,235</span>
            <span class="jgdesc">本周进馆人数</span>
        </div>
        <!-- 本月进馆人数 -->
        <div class="jgrs">
            <span class="jgval">345,235</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">33,532,890</span>
        </div>
    </div>
    <!-- 右边 -->
    <div class="rbox">
        <div class="rbox_title">各场馆实施实时进馆人数</div>
        <div class="rbox_con">
            <!-- 各场馆实时人数 cg1 -->
            <div class="rbitem">
                <span class="rbcgname">体育场</span>
                <span class="rbtitle">当前人数</span>
                <span class="rbval">4,738</span>
                <span class="rbrate">40%</span>
            </div>
            <!-- 各场馆实时人数 cg2 -->
            <div class="rbitem">
                <span class="rbcgname">体育场</span>
                <span class="rbtitle">当前人数</span>
                <span class="rbval">4,738</span>
                <span class="rbrate">40%</span>
            </div>
            <!-- 各场馆实时人数 cg3 -->
            <div class="rbitem">
                <span class="rbcgname">体育场</span>
                <span class="rbtitle">当前人数</span>
                <span class="rbval">4,738</span>
                <span class="rbrate">40%</span>
            </div>
            <!-- 各场馆实时人数 cg4 -->
            <div class="rbitem">
                <span class="rbcgname">体育场</span>
                <span class="rbtitle">当前人数</span>
                <span class="rbval">4,738</span>
                <span class="rbrate">40%</span>
            </div>
            <!-- 各场馆实时人数 cg5 -->
            <div class="rbitem">
                <span class="rbcgname">体育场</span>
                <span class="rbtitle">当前人数</span>
                <span class="rbval">4,738</span>
                <span class="rbrate">40%</span>
            </div>
            <!-- 各场馆实时人数 cg6 -->
            <div class="rbitem">
                <span class="rbcgname">体育场</span>
                <span class="rbtitle">当前人数</span>
                <span class="rbval">4,738</span>
                <span class="rbrate">40%</span>
            </div>

        </div>
    </div>

  </div>
</template>
<script>
// 引入echarts
import * as echarts from "echarts";

export default {
  data() {
    return {
      // 年月日选中的样式,默认日
      klselt: "d",
    };
  },
  //创建的时候修改背景图片
  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();
  },
  methods: {
    //选择年月日中的某个
    selitem(type) {
      this.klselt = type;
    },
    // 透明背景柱状统计图
    home_bar() {
      var chartDom = document.getElementById("homebar");
      var myChart = echarts.init(chartDom);
      var option;

      //
      let that = this;

      option = {
        xAxis: {
          type: "category",
          data: that.bar_tdata,
        },
        yAxis: {
          type: "value",
          //网格线
          splitLine: {
            lineStyle: {
              type: "soild",
              color: "#2F00FF",
            },
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 630, 530, 460],
            //data: that.bar_data,
            type: "bar",
            showBackground: true,
            // 设置顶部圆形
            symbolSize: function (d) {
              console.log(d);
              return d > 0 ? [10, 20] : [0, 0];
            },
            symbolPosition: "end",

            // symbolPosition:'end',
            // 背景颜色
            backgroundStyle: {
              symbolPosition: "end",
              symbolSize: [20, 20],
              symbolOffset: [0, "-20%"],
              opacity: 0.75,
              //color: 'rgba(180, 180, 180, 0.2)'
              color: {
                type: "linear",
                x: 0,
                y: 1,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#2F00FF", // 0% 处的颜色
                  },
                  {
                    offset: 0.2,
                    color: "#000", // 50% 处的颜色
                  },
                  {
                    offset: 0.8,
                    color: "#000", // 50% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#2F00FF", // 0% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },

            // 条柱颜色
            color: {
              type: "linear",
              x: 0,
              y: 1,
              x2: 1,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#00B4FF", // 0% 处的颜色
                },
                {
                  offset: 0.6,
                  color: "#2f00ff",
                },
                {
                  offset: 0.8,
                  color: "#2f00ff",
                },
                {
                  offset: 1,
                  color: "#00B4FF", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        ],
      };

      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);
    },
  },
};
</script>
<style>
#index{
    width: 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: 0.88rem;
  color: #b5b7c5;
}
/* 客流趋势 */
.leftbox .keliu .kliu_title {
  line-height: 0.88rem;
  font-size: 22px;
  padding-left: 2.4rem;
  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%;
}
/* 场馆流量预警 */
.leftbox .cgflow {
  margin-top: 0.2rem;
  background-image: url("../assets/index/left_t3_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 center;
  height: 2.8rem;
}
/* 场馆左侧 */
.leftbox .cgflow_leftbox {
  padding:66px 0 0 6%;
  float: left;
  width: 40%;
}

.cgflow .cgfitem{
    width: 100%;
    height: 0.46rem;
}
.cgflow .cgfitem span{
    display: block;
    margin-left: 12px;
    float: left;
    display: block;
}
.cgflow .cgfitem .cgtitle{
    color: #0096ff;
    font-size:14px;
}
.cgflow .cgfitem .cgval{
    font-weight: 600;
    font-size: 18px;
}
.cgflow .cgfitem .cgimg img{
    width: 26px;
    height: 26px;
    overflow: hidden;
    text-align: center;
}
/* 场馆左侧 */
.leftbox .cgflow_rightbox {
  padding:66px 0 0 12%;
  float: right;
  width: 30%;
  margin-left: 4%;
}
/* 各场馆人流趋势 */
.leftbox .gcgqs{
    float: left;
    width: 100%;
}
.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: 22px;
    line-height: 0.88rem;
    padding-left: 2.2rem;
}
/* 中间的数据 */
.centerbox{
    background-image: url('../assets/index/mid_bg.png');
    background-position: 0 0;
    background-size: 100% 100%;
    width:29%;
    float: left;
    margin-left: 3%;
    padding:1%;
    margin-top:4%;
}
.centerbox .jgrs{
    width: 33.33%;
    float: left;
    height: 120px;
}
.centerbox .tygpic{
    clear: both;
    width: 100%;
}
.centerbox .tygpic img{
    height: 360px;
    margin:12% auto;
}
/* 右边 */
.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: 18px;
    text-align: right;
    padding-right: 2.6rem;
    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.2rem;
    width: 46%;
    margin-left: 0.28rem;
    float: left;
    margin-top: 0.46rem;
    padding-top: 0.2rem;
}
.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.1rem;
}
.rbox .rbox_con .rbitem .rbval{
    font-size: 18px;
    width: 60%;
    height: 118px;
    text-align: center;
    line-height: 118px;
}
.rbox .rbox_con .rbitem .rbrate{
    width: 30%;
    float: left;
    height: 118px;
    text-align: center;
    line-height: 118px;

}
/* 页面背景 */
.page_bg {
  clear: both;
  background-image: url("../assets/index/bg.jpg") !important;
}
</style>