<template>
  <div class="hello">
    <div class="content">
      <div class="qushi">
        <div class="keliu">
          <div class="keliuTxt">客流趋势</div>
          <div class="keliuBtn">
            <div
              v-for="(item, index) in keliuList"
              :key="index"
              class="btnItem"
              @click="clickQushi(item.unit)"
              :class="item.unit == selectVal1 ? 'btnItemS' : 'btnItemD'"
            >
              <div class="txt">{{ item.unit }}</div>
            </div>
          </div>
        </div>

        <div class="tongjitu" id="homebar" style="height: 230px; width: 680px"></div>

        <div class="qushiBaifb">
          <div class="baifbLeft">
            <div class="baiFbitem">
              <div style="font-size: 14px">体育场</div>
              <div
                style="
                  color: white;
                  font-size: 18px;
                  font-weight: bold;
                  margin-left: 10%;
                "
              >
                20%
              </div>
              <img
                style="width: 10%; height: 60%"
                src="../../assets/index/体育场图例.png"
              />
            </div>
            <div class="baiFbitem">
              <div style="font-size: 14px">体育馆</div>
              <div  style="  color: white; font-size: 18px; font-weight: bold; margin-left: 10%; " >
                12%
              </div>
              <img style="width: 10%; height: 60%" src="../../assets/index/体育馆图例.png"/>
            </div>
            <div class="baiFbitem">
              <div style="font-size: 14px">游泳场馆</div>
              <div style="color: white; font-size: 18px; font-weight: bold">
                12%
              </div>
              <img  style="width: 10%; height: 60%" src="../../assets/index/体育馆图例.png"
              />
            </div>
          </div>
          <div class="baiFbRight">
            <div class="baiFbitem">
              <img  style="width: 10%; height: 60%"  src="../../assets/index/体育场图例.png" />
              <div  style=" color: white;  font-size: 18px;  font-weight: bold; margin-right: 10%; " >
                20%
              </div>
              <div style="font-size: 14px">图书馆</div>
            </div>
            <div class="baiFbitem">
              <img
                style="width: 10%; height: 60%"
                src="../../assets/index/体育馆图例.png"
              />
              <div
                style="
                  color: white;
                  font-size: 18px;
                  font-weight: bold;
                  margin-right: 10%;
                "
              >
                12%
              </div>
              <div style="font-size: 14px">文化馆</div>
            </div>
            <div class="baiFbitem">
              <img
                style="width: 10%; height: 60%"
                src="../../assets/index/体育馆图例.png"
              />
              <div
                style="
                  color: white;
                  font-size: 18px;
                  font-weight: bold;
                  margin-right: 10%;
                "
              >
                12%
              </div>
              <div style="font-size: 14px">博物馆</div>
            </div>
          </div>
        </div>
        <!-- 今日各场馆人数趋势 折线图 -->
        <div class="keliu keliuTu1">
          <div class="keliuTxt">今日各场馆人数趋势</div>
          <div id="kl-line" style="width: 680px; height: 180px;"></div>
        </div>
      </div>

      <div class="middle">
        <div
          style="
            position: absolute;
            color: white;
            top: 11%;
            left: 18%;
            font-weight: bold;
          "
        >
          345,235
        </div>
        <div
          style="
            position: absolute;
            color: white;
            top: 11%;
            left: 43.5%;
            font-weight: bold;
          "
        >
          2,345,235
        </div>
        <div
          style="
            position: absolute;
            color: white;
            top: 11%;
            left: 71%;
            font-weight: bold;
          "
        >
          2,345万
        </div>

        <img
          src="../../assets/index/主体.png"
          class="aimImg"
          style="
            width: 70%;
            height: 50%;
            position: absolute;
            left: 15%;
            top: 29%;
          "
        />

        <div
          style="
            position: absolute;
            color: white;
            left: 42%;
            bottom: 15.5%;
            font-weight: bold;
          "
        >
          年度进馆人数
        </div>
        <div
          style="
            position: absolute;
            color: white;
            left: 39%;
            bottom: 8%;
            font-weight: bold;
            font-size: 24px;
          "
        >
          33,532,890
        </div>
      </div>

      <div class="renshu">
        <div class="keliu">
          <div class="keliuTxt">各场馆实施实时进馆人数</div>
          <!-- <div>
            <canvas
              id="etELhoiEDSDBklnwaLybhInLlmnhnHuv"
              :width="cWidth"
              :height="cHeight"
              class="charts"
              @click="tap"
            />
          </div> -->
        </div>

        <div class="renshuItme">
          <div style="margin-right: 2%" class="renshuChild">
            <div class="title">体育场</div>
            <div class="dangq">当前人数</div>

            <div class="number">4,738</div>
            <div class="bfb">40%</div>
          </div>
          <div class="renshuChild">
            <div class="title">图书馆</div>
            <div class="dangq">当前人数</div>

            <div class="number">34,738</div>
            <div class="bfb">50%</div>
          </div>
          <div style="margin-right: 2%" class="renshuChild">
            <div class="title">体育馆</div>
            <div class="dangq">当前人数</div>

            <div class="number">899,738</div>
            <div class="bfb">80%</div>
          </div>
          <div class="renshuChild">
            <div class="title">文化馆</div>
            <div class="dangq">当前人数</div>

            <div class="number">240</div>
            <div class="bfb">25%</div>
          </div>
          <div style="margin-right: 2%" class="renshuChild">
            <div class="title">游泳场馆</div>
            <div class="dangq">当前人数</div>

            <div class="number">33,738</div>
            <div class="bfb">75%</div>
          </div>
          <div class="renshuChild">
            <div class="title">博物馆</div>
            <div class="dangq">当前人数</div>

            <div class="number">4,738</div>
            <div class="bfb">40%</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
// 引入echarts
import * as echarts from "echarts";

var uChartsInstance = {};
export default {
  data() {
    return {
      selectVal: 1,
      keliuList: [
        {
          unit: "年",
        },
        {
          unit: "月",
        },
        {
          unit: "日",
        },
      ],
      selectVal1: "年",
    };
  },
  mounted() {
    // 首页线图
    this.home_bar();
    // 折线图
    this.line_zone();
  },
  methods: {
    clickItme(val) {
      this.selectVal = val;
    },
    clickQushi(val) {
      this.selectVal1 = val;
    },

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

      option = {
        xAxis: {
          type: "category",
          data: [
            "Mon",
            "Tue",
            "Wed",
            "Thu",
            "Fri",
            "Sat",
            "Sun",
            "0c",
            "90",
            "10",
          ],
        },
        yAxis: {
          type: "value",
          //网格线
          splitLine: {
            lineStyle: {
              type: "soild",
              color: "#2F00FF",
            },
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 630, 530, 460],
            type: "bar",
            showBackground: true,
            // 设置顶部圆形
            symbolSize: function (d) {
              console.log(d);
              return d > 0 ? [10, barWidth] : [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
              },
            },

            //
            //  itemStyle:{
            //  normal:{
            //   barBorderRadius:[2,2,0,0]
            //  }
            //symbolOffset:[14,14],
            //borderRadius:[15,15,0,0]
            //  },

            // 条柱颜色
            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 lang="less" scoped>
.content {
  height: auto;
  width: 100%;
  margin-top: -3%;
  display: flex;
  justify-content: space-between;
  // border: 1px solid red;
  .qushi {
    width: 32%;
    // border: 1px solid red;
    margin-left: 1%;
    .keliu {
      width: 100%;
      height: 8vh;
      background-image: url(../../assets/index/left_t1_bg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;
      .keliuTxt {
        color: #fff;
        font-size: 18px;
        color: #b5b7c5;
        font-weight: bold;
        line-height: 8vh;
        padding-left: 22%;
      }
      // 年月日按钮
      .keliuBtn {
        width: 20%;
        height: 50%;
        // border: 1px solid red;
        position: absolute;
        right: 0;
        bottom: 15%;
        display: flex;
        justify-content: space-between;
        // align-items: center;
        .btnItemD {
          color: #006bff;
          background-image: url("../../assets/index/年月日1.png");
        }
        .btnItemS {
          color: white;
          background-image: url("../../assets/index/年月日2.png");
        }
        .btnItem {
          cursor: pointer;
          width: 30%;
          height: 95%;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          text-align: center;
          line-height: 200%;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }
    }
    .keliuTu1 {
      background-image: url("../../assets/index/left_t2_bg.png");
    }
    .tongjitu {
      width: 100%;
      height: 16vh;
      // border: 1px solid red;
    }
    .qushiBaifb {
      width: 100%;
      height: 30vh;
      // border: 1px solid red;
      background-image: url("../../assets/index/左1-2背景.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .baifbLeft {
        width: 25%;
        height: 30%;
        // border: 1px solid red;
        .baiFbitem {
          width: 100%;
          height: 30%;
          color: #0096ff;
          // border: 1px solid red;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
      .baiFbRight {
        width: 25%;
        height: 30%;
        // border: 1px solid red;
        .baiFbitem {
          width: 100%;
          height: 30%;
          color: #0096ff;
          // border: 1px solid red;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }

  .middle {
    width: 30%;
    height: 70vh;
    background-image: url("../../assets/index/中间数据.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 4%;
    position: relative;
    .aimImg {
      animation: firstdiv 2s linear 2s infinite alternate;
    }
    @keyframes firstdiv {
      0% {
        opacity: 1;
        margin-top: 0%;
      }
      25% {
        opacity: 0.7;
        margin-top: 3%;
      }
      50% {
        opacity: 0.5;
        margin-top: 5%;
      }
      75% {
        opacity: 0.7;
        margin-top: 3%;
      }
      100% {
        opacity: 1;
        margin-top: 0%;
      }
    }
  }

  .renshu {
    width: 32%;
    // height: 50vh;
    margin-right: 1%;
    // border: 1px solid red;
    .keliu {
      width: 100%;
      height: 8vh;
      background-image: url(../../assets/index/右1标题.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;
      .keliuTxt {
        position: absolute;
        right: 28%;
        top: 25%;
        color: white;
        font-size: 18px;
        color: #b5b7c5;
        font-weight: bold;
      }
    }

    .renshuItme {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      .renshuChild {
        width: 45%;
        height: 23vh;
        background-image: url("../../assets/index/右1数据.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 2%;
        position: relative;
        .title {
          color: #0095ff;
          font-weight: bold;
          position: absolute;
          top: 19%;
          right: 10%;
          font-size: 14px;
        }
        .dangq {
          position: absolute;
          top: 31.5%;
          left: 20%;
          color: white;
          font-weight: bold;
          font-size: 14px;
        }
        .number {
          color: white;
          position: absolute;
          font-size: 22px;
          font-weight: bold;
          bottom: 18%;
          left: 10%;
        }
        .bfb {
          position: absolute;
          bottom: 18%;
          right: 15%;
          color: #00d7ff;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
  