<template>
  <div class="body">
    <div class="header">
      <h1 class="header_title">松花湖景区通</h1>
      <span class="time">2024年4月23日 星期二 上午 9:51:54</span>
    </div>
    <div class="container">
      <div class="left">
        <div class="Visitorsflowrate">
          <div class="all_title">
            <h3 class="PartTitle">景区人流量排行榜TOP5</h3>
            <div class="selectDate" data-objname="ticketType">
              <span class="_selectData">2020年04月</span>
              <a class="icon_more"  @click="moreMeunSmalLeft_1 = !moreMeunSmalLeft_1;"> &gt; </a>
              <div class="_moreMenu" v-if="moreMeunSmalLeft_1">
                <ul>
                  <li class="change" data-date="2020-04">2020年04月</li>
                  <li data-date="2020-03">2020年03月</li>
                  <li data-date="2020-02">2020年02月</li>
                  <li data-date="2020-01">2020年01月</li>
                  <li data-date="2019-12">2019年12月</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="ticketType">
            <div class="ticketLeft">
              <h4 class="tableTitle">景区排名</h4>
              <ul>
                <li>
                  <em>1</em>
                  <span>成人票</span>
                </li>
                <li>
                  <em>2</em>
                  <span>儿童票</span>
                </li>
                <li>
                  <em>3</em>
                  <span>大门票+船票</span>
                </li>
                <li>
                  <em>4</em>
                  <span>免费票</span>
                </li>
                <li>
                  <em>5</em>
                  <span>亲子套票</span>
                </li>
              </ul>
            </div>
            <div class="ticketRight">
              <h4 class="tableTitle">景区排名</h4>
              <div class="chart bor">
                图表位置
              </div>
            </div>
          </div>
        </div>
        <div class="TouristData">
          <div class="all_title">
            <h3 class="PartTitle">景区近一个月游客排行榜TOP5</h3>
            <div class="selectDate" data-objname="ticketType">
              <span class="_selectData">2020年04月</span>
              <a class="icon_more"  @click="moreMeunSmalLeft_2 = !moreMeunSmalLeft_2;"> &gt; </a>
              <div class="_moreMenu" v-if="moreMeunSmalLeft_2">
                <ul>
                  <li class="change" data-date="2020-04">2020年04月</li>
                  <li data-date="2020-03">2020年03月</li>
                  <li data-date="2020-02">2020年02月</li>
                  <li data-date="2020-01">2020年01月</li>
                  <li data-date="2019-12">2019年12月</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="Tourischart bor">
            图表位置
          </div>
        </div>
        <div class="SalesTrend">
          <div class="all_title">
            <h3 class="PartTitle">景区近一年销售趋势排行榜TOP5</h3>
            <div class="selectDate" data-objname="ticketType">
              <span class="_selectData">2020年04月</span>
              <a class="icon_more"  @click="moreMeunSmalLeft_3 = !moreMeunSmalLeft_3;"> &gt; </a>
              <div class="_moreMenu" v-if="moreMeunSmalLeft_3">
                <ul>
                  <li class="change" data-date="2020-04">2020年04月</li>
                  <li data-date="2020-03">2020年03月</li>
                  <li data-date="2020-02">2020年02月</li>
                  <li data-date="2020-01">2020年01月</li>
                  <li data-date="2019-12">2019年12月</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="Saleschart bor">
            图表位置
          </div>
        </div>
      </div>
      <div class="center">
        <div class="regionData">
          <!--通知公告选项卡开始-->
          <div class="region_tab2">
            <div class="div_tab2">
              <a @click="tabClick(1)">游船视图</a>
              <a @click="tabClick(2)">游客视图</a>
            </div>
            <div class="regionIn_tab2 one" v-if="regionInShowOne">
              <div class="bor">
                游船视图页面
              </div>
            </div>
            <div class="regionIn_tab2 two" v-if="regionInShowTwo">
              <div class="wholeCountry">
                <h4>当日平台总成交额 </h4>
                <div class="money">
                  <span>1</span>
                  <span>5</span>
                  <span>3</span>
                  <span>8</span>
                  <span>9</span>
                  <span>7</span>
                  <span>4</span>
                  <span>5</span>
                </div>
                <div class="_count">当日累计总游客数<ins>234856</ins>人</div>
              </div>
              <div class="map bor">
                echerts地图图标位置
              </div>

            </div>
          </div>
          <!--通知公告结束-->
        </div>
        <div class="moddlebot">
          <div class="ProvinceData">
            <h3 class="PartTitle">客源地省份排名</h3>
            <div class="Saleschart bor">
              图表位置
            </div>
          </div>
          <div class="AgeData">
            <h3 class="PartTitle">游客年龄比例</h3>
            <div class="Saleschart bor">
              图表位置
            </div>
          </div>
          <div class="GenderData">
            <h3 class="PartTitle">游客男女比例</h3>
            <div class="GenderChart">
              <div class="genderBili">
                <div class="man">
                  <i class="icon_man"></i>
                  <strong> 男士60%</strong>
                </div>
                <div class="woman">
                  <i class="icon_woman"></i>
                  <strong> 女士40%</strong>
                </div>
                <div class="_line">
                  <div class="_line_man" style="width:60%;"></div>
                  <div class="_line_woman"  style="width:40%;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="OTA_ranking">
          <ul>
            <li>
              <img src="@/assets/images/piao.png"/>
              <em>今日售票数</em>
              <h2>5684</h2>
              <i>张</i>
            </li>
            <li>
              <img src="@/assets/images/piao.png"/>
              <em>今日退票数</em>
              <h2>5684</h2>
              <i>张</i>
            </li>
            <li>
              <img src="@/assets/images/people.png"/>
              <em>今日入园数</em>
              <h2>5684</h2>
              <i>张</i>
            </li>
            <li>
              <img src="@/assets/images/people.png"/>
              <em>今日出园数</em>
              <h2>5684</h2>
              <i>张</i>
            </li>
            <li>
              <img src="@/assets/images/people.png"/>
              <em>在园人数</em>
              <h2>5684</h2>
              <i>张</i>
            </li>
          </ul>
        </div>
        <div class="Forecast">
          <h3 class="PartTitle">停车场概况统计</h3>
          <div class="ForecastData">
            <div class="Forecastchart  bor">
              图表位置
            </div>
            <ul class="stopList">
              <li>
                <span>总车位数</span>
                <span>1600</span>
              </li>
              <li>
                <span>当日停车费营收</span>
                <span>600</span>
              </li>
              <li>
                <span>当月停车费营收</span>
                <span>1600</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="paymentCount">
          <h3 class="PartTitle">近一个月平台购票渠道和支付方式统计</h3>
          <div class="Saleschart bor">
            图表位置
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "songhuaIndex",
  data() {
    return {
      moreMeunSmalLeft_1:false,
      moreMeunSmalLeft_2:false,
      moreMeunSmalLeft_3:false,
      regionInShowOne:true,
      regionInShowTwo:false,
    }
  },
  created() {
  },
  methods: {
    tabClick(state){
      if(state == 1){
        this.regionInShowOne=true;
        this.regionInShowTwo=false;
      }else{
        this.regionInShowOne=false;
        this.regionInShowTwo=true;
      }
    },

  },

}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/shh_body.scss";
@import "@/assets/styles/shh_index.scss";

</style>
