<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">
                <div id="chartRankOneMb" style="width:200px;height:240px;"></div>
              </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">
            <div id="chartRankOneMonth" style="width: 500px;height:300px;"></div>
          </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">
            <div id="chartRankOneSale" style="width: 500px;height:220px;"></div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="regionData">
          <!--通知公告选项卡开始-->
          <div class="region_tab2">
            <div class="div_tab2">
              <a @click="tabClick(1)" v-bind:class="regionInShowOne?'df_on':''">游船视图</a>
              <a @click="tabClick(2)" v-bind:class="regionInShowTwo?'df_on':''">游客视图</a>
            </div>
            <div class="regionIn_tab2 one" v-show="regionInShowOne">
              <div class="borp">
                <!--游船视图页面-->
                <baidu-map style="margin-top: 50px" :mapStyle="{style : 'midnight'}" class="region_tab2"
                           :center="{lng: 126.91531, lat: 43.610448}" :zoom="11" :scroll-wheel-zoom="true">
                  <bm-polyline v-for="item in dataSource" :path="item.polylinePath" :stroke-color="item.color"
                               :stroke-opacity="0.5" :stroke-weight="10"
                               :editing="false">
                  </bm-polyline>
                  <bm-marker v-for="item in dataSource"
                             :position="item.polylinePath[0]" :dragging="false"
                             animation="BMAP_ANIMATION_BOUNCE">
                    <bm-label :content="item.shipName" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: -35, height: 30}"/>
                  </bm-marker>
                </baidu-map>
              </div>
            </div>
            <div class="regionIn_tab2 two" v-show="regionInShowTwo">
              <div class="wholeCountry">
                <h4>当日平台总成交额 </h4>
                <div class="money">
                  <span>{{getFirstDigit(0)}}</span>
                  <span>{{getFirstDigit(1)}}</span>
                  <span>{{getFirstDigit(2)}}</span>
                  <span>{{getFirstDigit(3)}}</span>
                  <span>{{getFirstDigit(4)}}</span>
                  <span>{{getFirstDigit(5)}}</span>
                  <span>{{getFirstDigit(6)}}</span>
                  <span>{{getFirstDigit(7)}}</span>
                </div>
                <div class="_count">当日累计总游客数<ins>{{ peopleNum }}</ins>人</div>
              </div>
              <div class="map">
                <div id="mapByPerson" style="width: 740px;height: 426px"></div>
              </div>

            </div>
          </div>
          <!--通知公告结束-->
        </div>
        <div class="moddlebot">
          <div class="ProvinceData">
            <h3 class="PartTitle">客源地省份排名</h3>
            <div class="Saleschart">
              <div id="chartRankOneCity" style="width: 250px;height:200px;"></div>
            </div>
          </div>
          <div class="AgeData">
            <h3 class="PartTitle">游客年龄比例</h3>
            <div class="Saleschart">
              <div id="chartRankOneAge" style="width: 200px;height:200px;padding: 0"></div>
            </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>
          </ul>
        </div>
        <div class="Forecast">
          <h3 class="PartTitle">停车场概况统计</h3>
          <div class="ForecastData">
            <div class="Forecastchart">
              <div id="chartRankOnePark" style="width: 250px;height:250px"></div>
            </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">
            <div id="chartRankOnePay1" style="width: 250px;height:210px;display: inline-block"></div>
            <div id="chartRankOnePay2" style="width: 250px;height:210px;display: inline-block"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {getMap} from "@/api/ship/diqiu";
import {getShipRoute} from "@/api/ship/shipMapping";
export default {
  name: "songhuaIndex",
  data() {
    return {
      moreMeunSmalLeft_1:false,
      moreMeunSmalLeft_2:false,
      moreMeunSmalLeft_3:false,
      regionInShowOne:false,
      regionInShowTwo:true,
      money:15389740,
      peopleNum:234856,
      dataSource:[]
    }
  },
  mounted() {
    //近一个月排行
    this.chartRankOneMonthGet();
    //近一年销售
    this.chartRankOneSaleGet();
    //客源地省份
    this.chartRankOneCityGet();
    //游客年龄
    this.chartRankOneAgeGet();
    //支付方式与购买渠道
    this.chartRankOnePayGet();
    //停车场
    this.chartRankOneParkGet();
    //人流量排行
    this.chartRankOneMbsGet();
    //地图
    this.getMapByPerson();
    let _this = this;
    setInterval(function(){
      _this.money += Math.round(Math.random()*100);
      _this.peopleNum += Math.round(Math.random()*100);
    },3000)
  },
  created() {
    this.selectShipRoute()
  },
  methods: {
    selectShipRoute() {
      getShipRoute().then(res => {
        if (res.code == 200) {
          this.dataSource = res.data
        } else {
          this.$modal.msgError("查询失败");
        }
      })
    },
//https://echarts.apache.org/examples/zh/editor.html?c=line-stack
    chartRankOneMonthGet(){
      let option = {
        legend: {
          textStyle: {
            color: 'white'  // Set legend text color to white
          },
          right: '0'  // Align legend to the right
        },
        tooltip: {},
        dataset: {
          source: [
            ['product', '本月', '上月'],
            ['动物园', 100,150],
            ['五龙潭', 55,85],
            ['三清观', 65,88],
            ['植物园', 88,15]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#fe6f66'
                }, {
                    offset: 1,
                    color: '#f09a62'
                }]),
            },
          },
         },
         {
          type: 'bar' ,
          barWidth: '15%',
          itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#4ac1d6'
                }, {
                    offset: 1,
                    color: '#50d496'
                }]),
            }

          },
        }]
      };
        let myChart = this.$echarts.init(document.getElementById("chartRankOneMonth"));
        myChart.setOption(option);
    },
    chartRankOneAgeGet(){
      let option = {
        tooltip: {
        },

        series: [
          {
            name: '人员比例',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: true,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 14,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { name: '60岁以上', value: 20 },
              { name: '40-60岁之间', value: 30 },
              { name: '18岁之内', value: 30 },
              { name: '18-40岁之间', value: 20 }
            ]
          }
        ]
      };
      let myChart = this.$echarts.init(document.getElementById("chartRankOneAge"));
      myChart.setOption(option);
    },
    //https://echarts.apache.org/examples/zh/editor.html?c=gauge-multi-title
    chartRankOneParkGet(){
      const gaugeData = [
        {
          value: 85,
          name: '已占用车位数',
          title: {
            offsetCenter: ['0%', '70%']
          },
          detail: {
            offsetCenter: ['0%', '105%']
          },

        }
      ];
      let option = {
        series: [
          {
            type: 'gauge',
            anchor: {
              show: true,
              showAbove: true,
              size: 18,
              itemStyle: {
                color: '#fff'
              }
            },
            axisLine: {
              lineStyle: {
                width: 6,
                color: [
                  [0.3, '#e3ce67'],
                  [0.7, '#2a86b6'],
                  [1, '#42c51d']
                ]
              }
            },
            pointer: {
              icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
              width: 8,
              length: '80%',
              offsetCenter: [0, '8%']
            },
            progress: {
              show: true,
              overlap: true,
              roundCap: true
            },

            data: gaugeData,
            title: {
              fontSize: 14
            },
            detail: {
              width: 40,
              height: 14,
              fontSize: 14,
              color: '#fff',
              backgroundColor: 'inherit',
              borderRadius: 3,
              formatter: '{value}%'
            }
          }
        ]
      };
      setInterval(function () {
        gaugeData[0].value = +(Math.random() * 100).toFixed(2);
        myChart.setOption({
          series: [
            {
              data: gaugeData
            }
          ]
        });
      }, 2000);
      let myChart = this.$echarts.init(document.getElementById("chartRankOnePark"));
      myChart.setOption(option);
    },
    chartRankOneSaleGet(){
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '景区1',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '景区2',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '景区3',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '景区4',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '景区5',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
      let myChart = this.$echarts.init(document.getElementById("chartRankOneSale"));
      myChart.setOption(option);
    },
    //https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category
    chartRankOneCityGet() {
      let option = {
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          top: "2%",
          containLabel: true,
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 20,
                color: "rgba(255, 255, 255, 0.8)",
              },
              formatter: function (name) {
                return name + ": ";
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: [
              "湖北省",
              "广东省",
              "江西省",
              "广西省",
              "湖南省",
            ],
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: false,
            axisLabel: {
              textStyle: {
                fontSize: 13,
                color: "rgba(255, 255, 255, 0.8)",
                padding: [0, 0, 0, 10],
              },
              formatter: function (value) {
                return value
                  .toLocaleString()
                  .toString()
                  .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,");
              },
            },
            data: [60, 30, 10, 8, 5],
          },
        ],
        series: [
          {
            name: "车辆",
            type: "bar",
            zlevel: 1, //通过 zlevel 设置层级
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                color: function(params) {//柱状图设置不同颜色
                  // 给出颜色组
                  var colorList = ["#ee6767", "#92cc76", "#fac859", "#4a77dd","#ba77fd"];
                  return colorList[params.dataIndex]
                },
              },
            },
            label: {
              show: true,
              position: 'right',
              formatter: '{c}%' // 显示数值和百分比
            },
            data: [60, 30, 10, 8, 5],
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 20,
            barGap: "-100%", //两条柱状图重合
            data: [100, 100, 100, 100, 100],
            itemStyle: {
              normal: {
                color: "rgba(108, 254, 255, 0.3)",
                barBorderRadius: 10,
              },
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("chartRankOneCity"));
      myChart.setOption(option);
    },
    //https://ppchart.com/#/今日各考场承载总考生数
    chartRankOnePayGet(){
      var scale = 1;
      var echartData = [
        {
          value: 2154,
          name: "微信",
        },
        {
          value: 3854,
          name: "现金",
        },
        {
          value: 3515,
          name: "支付宝",
        },
        {
          value: 3515,
          name: "银联",
        }
      ];
      var rich = {
        yellow: {
          color: "#ffc72b",
          fontSize: 12 * scale,
          padding: [5, 4],
          align: "center",
        },
        total: {
          color: "#ffc72b",
          fontSize: 12 * scale,
          align: "center",
        },
        white: {
          color: "#fff",
          align: "center",
          fontSize: 12 * scale,
          padding: [21, 0],
        },
        blue: {
          color: "#49dff0",
          fontSize: 12 * scale,
          align: "center",
        },
        hr: {
          borderColor: "#0b5263",
          width: "100%",
          borderWidth: 1,
          height: 0,
        },
      };
      let option = {
        // backgroundColor: "#031f2d",
        tooltip:{},
        graphic: {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: '支付方式',
            textAlign: 'center',
            fill: 'white',
            width: 30,
            height: 30,
            fontSize: 14
          }
        },
        series: [
          {
            name: "支付方式",
            type: "pie",
            radius: ["32%", "40%"],
            hoverAnimation: false,
            color: ["#c487ee", "#deb140", "#49dff0", "#034079", "#6f81da", "#00ffb4"],
            label: {
              normal: {
                formatter: function (params, ticket, callback) {
                  var total = 0;
                  var percent = 0;
                  echartData.forEach(function (value, index, array) {
                    total += value.value;
                  });
                  percent = ((params.value / total) * 100).toFixed(1);
                  return (
                    "{white|" +
                    params.name +
                    "}\n{hr|}\n{yellow|" +
                    params.value +
                    "}\n{blue|" +
                    percent +
                    "%}"
                  );
                },
                rich: rich,
              },
            },
            labelLine: {
              normal: {
                length: 20 * scale,
                length2: 0,
                lineStyle: {
                  color: "#0b5263",
                },
              },
            },
            data: echartData,
          },
        ],
      };
      let myChart1 = this.$echarts.init(document.getElementById("chartRankOnePay1"));
      let myChart2 = this.$echarts.init(document.getElementById("chartRankOnePay2"));
      myChart1.setOption(option);
      myChart2.setOption(option);
    },
    //https://blog.csdn.net/qq_43519782/article/details/118707267?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171393938516800186569476%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=171393938516800186569476&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-9-118707267-null-null.142^v100^pc_search_result_base4&utm_term=%E6%A8%AA%E5%90%91%E6%9F%B1%E5%9B%BE%E9%87%8D%E5%90%88&spm=1018.2226.3001.4187
    chartRankOneMbsGet(){
      let option = {
        grid: {
          left: "0%",
          right: "0%",
          bottom: "0%",
          top: "0%",
          containLabel: true,
        },
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     type: "shadow",
        //   },
        //   confine: true,
        //   textStyle: {
        //     fontSize: 12,
        //     color: "rgba(255, 255, 255, 0.8)",
        //   },
        //   formatter: function (params) {
        //     return (
        //       params[0].name +
        //       "<br/>" +
        //       "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background:linear-gradient(90deg, #388CFF 0% ,#6CFEFF 100%)'></span>" +
        //       params[0].seriesName +
        //       " : " +
        //       params[0].value
        //         .toLocaleString()
        //         .toString()
        //         .replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,") +
        //       " 辆/天"
        //     );
        //   },
        // },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 12,
                color: "rgba(255, 255, 255, 0.8)",
                backgroundColor:"#061731",
                width:200,
                height:30,
                align:'center',
              },
              formatter: function (name) {
                return name + " ";
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: [
            ],
          },
        ],
        series: [
          {
            name: "车辆",
            type: "bar",
            zlevel: 1, //通过 zlevel 设置层级
            barWidth: 15,
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                // 渐变色
                // color: "rgba(108, 254, 255, 0.3)",

                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#388CFF",
                  },
                  {
                    offset: 1,
                    color: "#6CFEFF",
                  },
                ]),
              },
            },
            label: {
              show: true,
              position: 'right',
              formatter: '{c}%' // 显示数值和百分比
            },
            data: [60, 35, 20, 8, 5],
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 15,
            barGap: "-100%", //两条柱状图重合
            data: [100, 100, 100, 100, 100],
            itemStyle: {
              normal: {
                color: "rgba(108, 254, 255, 0.3)",
                barBorderRadius: 10,
              },
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("chartRankOneMb"));
      myChart.setOption(option);
    },
    getMapByPerson(){
      let option = getMap();
      let myChart = this.$echarts.init(document.getElementById("mapByPerson"));
      myChart.setOption(option);
    },
    tabClick(state){
      if(state == 1){
        this.regionInShowOne=true;
        this.regionInShowTwo=false;
      }else{
        this.regionInShowOne=false;
        this.regionInShowTwo=true;
      }
    },
    getFirstDigit(num) {
      return Number(String(this.money).charAt(num));
    }
  },

}
</script>

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

</style>
