ssh_visualization/songhua-ui/src/views/index/index.vue

<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 id="chartRankOneMb" style="width: 190px;height:190px;"></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 bor">
            <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 bor">
            <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)">游船视图</a>
              <a @click="tabClick(2)">游客视图</a>
            </div>
            <div class="regionIn_tab2 one" v-if="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" @click="clickMap(item.shipName)">
                  </bm-polyline>
                  <bm-marker v-for="item in dataSource" :position="item.polylinePath.length - 1" :dragging="false">
                    <bm-label :content="item.shipName" :labelStyle="{color: 'red', fontSize : '10px'}"
                              :offset="{width: -35, height: 30}"/>
                  </bm-marker>
                </baidu-map>
              </div>
            </div>
            <div class="regionIn_tab2 two" v-if="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 bor">
                <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 bor">
              <div id="chartRankOneCity" style="width: 200px;height:200px;"></div>
            </div>
          </div>
          <div class="AgeData">
            <h3 class="PartTitle">游客年龄比例</h3>
            <div class="Saleschart bor">
              <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  bor">
              <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 bor">
            <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, getMapPromise} 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: [
        {
          shipName: "泰坦尼克号",
          color: "ivory",
          polylinePath: [
            {lng: 126.91531, lat: 43.610448},
            {lng: 128.91531, lat: 45.610448},
            {lng: 130.91531, lat: 46.610448}
          ],
        },
        {
          shipName: "威尼斯",
          color: "#003399",
          polylinePath: [
            {lng: 146.91531, lat: 53.610448},
            {lng: 138.91531, lat: 25.610448},
            {lng: 140.91531, lat: 16.610448}
          ],
        }
      ],
    }
  },
  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: {
    clickMap(e) {
      alert(e)
    },
    selectShipRoute() {
      // getShipRoute().then(res => {
      //   if (res.code == 200) {
      //     this.dataSource = res.data
      //     console.log("this.dataSource", this.dataSource)
      //   } 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'}, {type: 'bar'}]
      };
      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: '#FAC858'
              }
            },
            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 = {
        color: ['#1890FF'],
        tooltip: {},
        textStyle: {
          show: false,
          fontSize: 14,
          fontStyle: 'normal',
          fontWeight: 'bold'
        },
        grid: {
          top: '5%',
          left: '2%',
          right: '4%',
          bottom: '2%',
          containLabel: true,
          borderWidth: 0
        },
        xAxis: {
          type: 'value',
          // max:50,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fefef',
            },
          },
          axisLabel: {
            show: false,
            interval: 0,
            formatter: '{value} %' // 给每个数值添加%
          }
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white',
            },
          },
          type: 'category',
          data: [
            '北京',
            '澳门',
            '香港',
            '长春',
            '新建'
          ]
        },
        series: [
          {
            itemStyle: {
              normal: {
                color: function (params) {
                  // build a color map as your need.
                  var colorList = [
                    '#27727B',
                    '#27727B',
                    '#FCCE10',
                    '#E87C25',
                    '#C1232B'
                  ];
                  return colorList[params.dataIndex];
                },
                label: {
                  show: false,
                  position: 'right',
                  formatter: '{c}%' //这是关键，在需要的地方加上就行了
                },
                //设置柱子圆角
                barBorderRadius: [0, 20, 20, 0]
              },
              backgroundStyle: {
                color: '#EBEEF5'
              }
            },
            data: [444, 555, 666, 777, 888],
            type: 'bar',
            barWidth: 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: "2%",
          right: "2%",
          bottom: "2%",
          top: "2%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          confine: true,
          textStyle: {
            fontSize: 13,
            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: 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: true,
            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: [50000, 22000, 10000, 5000, 2000],
          },
        ],
        series: [
          {
            name: "车辆",
            type: "bar",
            zlevel: 1, //通过 zlevel 设置层级
            barWidth: 10,
            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",
                  },
                ]),
              },
            },
            data: [50000, 22000, 10000, 5000, 2000],
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 10,
            barGap: "-100%", //两条柱状图重合
            data: [50000, 50000, 50000, 50000, 50000],
            itemStyle: {
              normal: {
                color: "rgba(108, 254, 255, 0.3)",
                barBorderRadius: 10,
              },
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("chartRankOneMb"));
      myChart.setOption(option);
    },
    getMapByPerson() {
      getMapPromise()
        .then((result) => {
          let myChart = this.$echarts.init(document.getElementById("mapByPerson"));
          myChart.setOption(result);
        })
        .catch((error) => {
          console.error(error);
        });
    },
    tabClick(state) {
      if (state == 1) {
        this.regionInShowOne = true;
        this.regionInShowTwo = false;
      } else {
        this.regionInShowOne = false;
        this.regionInShowTwo = true;
        this.getMapByPerson()
      }
    },
    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>